[CSS] 애니메이션과 keyframes

https://developer.mozilla.org/ko/docs/Web/CSS/animation

animation - CSS: Cascading Style Sheets | MDN

animation - keyframes 

애니메이션 프레임을 퍼센트 단위로 지정을 하고, 프레임 이름으로 애니메이션 속성에 등록한다.

See the Pen Untitled by KIMAERI (@AERIKIM) on CodePen.

 

• animation-name : keyframes에 지정한 애니메이션 이름
• animation-duration : 애니메이션이 한 사이클을 완료하는 데 걸리는 시간 (지속시간)
• animation-timing-function : 주기 동안 애니메이션이 진행되는 방식
  - ease : 느리게 → 빠르게 → 느리게
  - linear : 일정하게
  - steps(n) : n개의 스텝으로 쪼개짐
• animation-delay : 애니메이션 지연시간
• animation-iteration-count : 애니메이션 반복 횟수 
  - infinite : 무한
• animation-direction : 애니메이션이 반복되는 방향 
  - normal : 정방향
  - reverse : 역방향
  - alternate : 정 → 역 왕복
  - alternate-reverse: 역 → 정 왕복
• animation-play-state : 애니메이션이 동작하고 있는 상태
  - running : 동작
  - paused : 일시정지 
• animation-fill-mode : 애니메이션 실행 전과 후의 대상 스타일을 적용
  - none : 원래 자리 → 0% → 100% → 원래 자리
  - forward : 원래 자리 → 0% → 100%
  - backwards : 0% → 100% → 원래 자리
  - both : 0% → 100%

📌 animation-fill-mode 예시

See the Pen Untitled by KIMAERI (@AERIKIM) on CodePen.

 

 

 

 

출처

프론트엔드 웹 개발의 모든 것 초격차 패키지