animation

: 유저의 액션이 없이도 계속 작동하게끔 적용 가능
다수의 스타일을 전환하는 애니메이션을 만들 수있음

animation property

1. animation-duration
2. animation-timing-function
3. animation-delay
   -> transition과 사용법 같음

4. animation-iteration-count

-몇번을 반복할 건지 지정해줌

-> 2번 반복 지정

-> infinite (무한반복)

->animation rotate(-360deg)로 설정하면 반대방향으로 돔

5. animation-direction

• 애니매이션 실행 방향 설정
  1) normal : 정방향 (기본값)
  2) reverse : 역방향, 애니매이션 단계가 거꾸로 수행되며, 타이밍 기능 또한 반대로 작동
  

->기본값은 시계방향, reverse 설정하면 반시계방향으로 돔

ex) ease-in 이 ease-out으로 변경됨
3)alternate: 매 사이클마다 주기의 방향을 뒤집으면서 첫번째 반복은 정방향
ex) 앞으로 갔다가 뒤로 왔다가...

4)alternate-reverse:각 주기의 방향을 뒤집으면서 첫번째 반복은 역방향으로 진행
ex) 반시계방향으로 돌다가 다시 시계방향으로 돌다가

6. animation-fill-mode

1) none: 애니메이션이 실행되지 않을 때는 대상에 css 스타일 속성만 적용

-> 처음과 끝이 일반 CSS스타일 적용

2) forwards : 애니매이션이 끝나면 원래 css스타일이 아닌 애니매이션이 끝난 그 시점의 마지막 keyframe의 스타일 속성을 유지한다.

->애니메이션이 끝난 후, keyframes의 마지막 css 유지

3)backwards: 시작을 애니매이션 keyframes 첫시작 스타일로 시작해서 원래 본인의 css로 돌아옴

->애니메이션 시작 전부터 keyframes 시작 css적용되있다가 마지막에는 원래 css적용

4)both: keyframes 처음 css로 기다렸다가 끝나도 keyframes css로 유지됨

-> 처음과 끝이 전부 keyfraems css 적용
(forwards+backwards)

7. animation-paly-state

1) running : 실행됨(기본값)
2) paused : 정지됨

-> paused로 정지시켜놨다가 hover하면 running으로 애니메이션 작동

keyframe 으로 애니메이션 묶음을 만들어 놓고 사용함

ex) @keyframes [애니메이션 네임]{}....
-from , to
-0%~100%

animation 한번에 사용하기

• transition과 마찬가지로 시간 속성이 두개 이상 사용되면 첫번째 오는 속성이 animation-duration으로 인식
  ex) animation: 3s ease-in 1s infinite reverse both running slide
  -> animation : [duration] [timing-funtion][delay] [iteration-count][direction] [fill-mode][paly-state] [name];