변형속성

[HTML5&CSS3] 변형 속성

CSS3에서는 변형 속성을 통해 간단한 애니메이션을 구현할 수 있습니다. 우선 변경 속성이 어떻게 사용되는지부터 간단하게 알아보겠습니다. Web Page Design Hello, World! 위 예제는 div에 간단한 스타일을 적용한 예제입니다. 이 상태에서 div에 마우스를 올리면 색상이 변하도록 스타일을 다음과 같이 추가합니다. 그럼 div에 마우스를 올릴 때마다 색상이 검은색으로 바뀔 것입니다. 이제 애니메이션 구현을 위해 transition-duration 속성을 추가하고 값을 3s로 주겠습니다. 이렇게 하면 div에 마우스를 올릴 때 색상이 바뀌는 건 똑같지만 3초 정도의 지연시간이 적용되어 색상이 서서히 바뀌는 걸 확인할 수 있습니다. 이와 같은 변경 속성은 다음과 같은 속성에 적용되며 위치관..