📌 애니메이션

🌻 animation

• 다수의 스타일을 자동으로 재생될 수 있도록 만듬
• key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀

🌻 transition과 차이점

• user의 특정 액션에 의해서 스타일 변경됨
• 액션하지 않으면 스타일 변경X
• animation은 user의 액션 없어도 계속 움직임
• A B C D 로 움직이는 하나의 세트를 만들수 있음

🌻 @keyframes

animation: my-first-animation 2s infinite alternate (돌아올때도 자연스럽게)

• 2개일 때는 from, to로 작성

@keyframes my-first-animation {
from { width: 100px; }
to { width: 300px; }
}

• 2개이상은 %로 작성

@keyframes my-first-animation {
0% { width: 100px; }
50% { width: 300px; }
100% { width: 100px; } /*돌아올때도 자연스럽게*/
}

🌻 animation-name

• transition-porperty에 대응하는 같은 속성
• keyframes 이름 쓰기

🌻 animation-duration

• 애니매이션이 한 사이클을 완료하는 데 걸리는 시간
• s, ms 단위 사용

🌻 animation-delay

• 한 사이클을 시작하는데 약간의 지연시간을 둠
• 음수로 설정하면 애니매이션 주기의 중간부터 시작됨 (-1s 면 마치 1초전부터 재생을 시작한 것처럼)

🌻 animation-timing-function

• ease(기본값), ease-in, ease-out, linear 등
• transition-timing-function과 동일

🌻 animation-iteration-count

• 반복횟수
• 기본값은 1
• infinite, <number>

🌻 animation-direction

• keyframes을 만들어 놓고 거꾸로 재생할 수도 있음
• 기본값 normal
• reverse(역방향), alternate(정방향,역방향 돌아가면서), alternate-reverse(역방향,정방향 돌아가면서)

🌻 animation-play-state

• 기본값 running
• paused(일시정지)

🌻 animation-fill-mode

• 애니메이션 실행 전과 후에 대상에 스타일을 적용하는 방법 지정
• none(기본값) : 자기가 원래 가지고 있던 스타일만 가지고 있음, 애니메이션 적용될 때만 keyframes스타일 적용
• forwards : 끝난 모습의 keyframes를 그대로 유지 (to or 100% 모습)
• backwards : 미리 from or 0% 모습으로 준비하고 있어라
• both : forwards, backwards 둘다 적용

🌻 animation (shorthand)

• 단축속성
• transition이랑 마찬가지고 시간에 해당하는 항목이 두개가 있을 시 첫번째가 duration, 두번째가 delay
• initial 값을 사용한다면 굳이 명시하지 않아도 됨

animation: 3s esas-in 1s infinite reverse both running keyframes이름;