[HTML+CSS] 애니메이션 (변형 속성)

▶ 애니메이션 속성에는 애니메이션 속성과 변형 속성으로 나뉜다.

 

 

가장 기본적인 예시를 보면

See the Pen by yeojinho (@yeojinho) on CodePen.

 

출력된 결과물 오렌지 사각형에 마우스를 올려두면 애니메이션이 구현이 됨을 알 수 있다. 

 

속성	설명
transition	모든 transition 속성을 한 번에 사용함
transition-delay	이벤트 발생 후 몇 초후에 재생할지 지정
transition-duration	몇 초 동안 재생할지 지정
transition-property	어떤 속성을 변형할지 지정
transition-timing-function	수치 변형 함수 지정.

 

 

또다른 예시를 들어 보겠습니다. 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

이 애니메이션 역시 화면에 마우스르 가져다 대면 애니메이션이 동작함을 알 수 있습니다 .

 

 

▶transition-delay 속성 

 

delay 속성이 적용된 예시를 보겠습니다.

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

▶transition-timing-function 속성

 

 

다음은 transition-timing-function 속성이 들어간 예시입니다. 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

▶transition-property 속성

 

See the Pen by yeojinho (@yeojinho) on CodePen.