[HTML+CSS] 키 프레임과 애니메이션 속성

ex) animation 

 

속성	설명
animation	모든 animation을 한 번에 적용
animation-delay	이벤트 발생 후 몇 초 후에 재생할지 지정
animation-direction	애니메이션 진행 방향 설정
animation-duration	애니메이션 몇 초 쓸지 지정
animation-timing-function	수치 변형 함수를 지정
animation-play-state	애니메이션 재생 상태를 지정
animation-iteration-count	애니메이션 반복 횟수를 지정
animation - name	애니메이션 이름을 지정

 

 

예시)

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

 

▶ animation-direction 속성

 

▶ animation-direction 속성은 애니메이션 반복하는 형태를 지정

 

속성	설명
alternate	from~to로 이동 후 to ~ from으로 이동을 반복
nomal	계속 from~to로 이동

 

 

예시)

 

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

 

 

▶ animation-play-state 속성

 

animation-play-state 속성은 애니메이션 중지하고 재생 할 때 사용 하는 속성

 

ex) hover를 통해서 마우스 올려 놓을 시에 animation 동작이 멈추게 설정

 

 

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