[애니메이션] CSS 애니메이션(animation)

📄 animation 관련 속성

1. animation-name

: 어떤 keyframes를 요소에 적용할 것인지 지정

animation-name: moveright;

2. animation-duration

: 애니메이션을 한 번 재생하는데 걸리는 시간을 설정

animation-duration: 2s;

3. animation-direction

: 애니메이션의 재생 방향을 정의

animation-direction: normal; // 기본값(정방향)
animation-direction: reverse; // 역방향
animation-direction: alternate; // 정방향으로 재생, 단 반복시 정방향/역방향을 번갈아 재생
animation-direction: alternate-reverse: 역방향으로 재생, 단 반복시 역방향/정방향을 번갈아 재생

4. animation-iteration-count

: 애니메이션 재생 횟수를 정의한다.

따로 지정하지 않으면 한번 재생되고 끝난다.

animation-iteration-count: inifinite // 무한 반복;; ; ; ; ; ; ; ; ; ; ;

5. animation-timing-function

: 애니메이션 재생 패턴을 정의한다.

animation-timing-function: ease-in-out;

6. animation-delay

: 애니메이션 시작을 얼마나 지연할 지 설정

animation-delay: 2s;

animation 단축속성 순서

animation: moveRight(name) 0.4 (duration) linear(timing-function) 1s (delay)
  infinite(iteration-count) alternate(direction);

---

출처

• 강력한 CSS