[CSS] animations

- CSS animations 구성 요소

• animation property
• @keyframes

 

- animation property

: animation 할 요소의 스타일을 지정 => CSS animation 시퀀스 생성

• animation-name
  • animation keyframe을 설명하는 @keyframes의 이름을 지정
    
    
• animation-duration
  • animation 한 주기를 완료하는데 걸리는 시간
    
    
• animation-timing-function
  • animation 타이밍을 구성
  • 가속 곡선을 설정하여 animation이 keyframe을 통해 전환되는 방식
  • 예) linear, ease-in-out, step, cubic-bezier 등
  • https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function 
    
    
• animation-delay
  • 요소가 로드된 시간과 animation 시작 사이의 지연 시간 설정
    
    
• animation-iteration-count
  • animation이 반복되어야 하는 횟수를 구성
  • 예) 0, 2, 1.5, infinite
  • https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count 
    
    
• animation-direction
  • animation이 실행할 때마다 방향을 바꾸거나 시작점으로 재설정하고 반복할지 여부를 구성
  • 예) normal, reverse, alternate(좌 -> 우, 우 -> 좌) 등
  • https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction 
    
    
• animation-fill-mode
  • animation이 실행되기 전과 후에 적용되는 값을 구성
  • https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
    
    
• animation-play-state
  • animation을 일시 중지하고 다시 시작 설정
  • paused, running

 

- @keyframes

• animation의 모양을 정의
• 두 개 이상의 keyframe을 설정하여 수행
• 0%는 animation의 첫 번째 순간을 나타내고 100%는 animation의 최종 상태를 나타낸다.
• 별칭: 0% = from / 100% = to
• animation의 시작과 끝 사이의 중간 단계를 설명하는 추가 keyframe을 선택적으로 포함할 수 있다.

 

- animation JavaScript Event

• animationstart: animation 시작 감지
• animationend: animation 종료 감지
• animationiteration: animation 반복 시작 감지

element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

---

[ 참고자료 ]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations