css-animation속성

animation

🔍transition vs animation
CSS 전환(Transition)은 요소의 전후 상태를 부드럽게 변화시키는 효과를 제공하며, 단지 시작과 종료 상태만 고려하면 되기 때문에 간단하게 사용할 수 있습니다.
반면, 애니메이션(Animation)은 시작과 종료뿐만 아니라 중간 상태도 고려할 수 있으며, 더 복잡하고 다양한 효과를 추가할 수 있습니다.

@keyframes는 '애니메이션 프레임'을 정의하는 CSS 규칙.
from, to 키워드로 애니메이션의 시작과 종료 스타일 정의하거나, 0%부터 100% 사이의 퍼센트 값으로 각 단계의 애니메이션을 정의할 수 있다.

움직임(모션효과)을 만드는 속성.

종류
animation-duration:지속 시간 0s
animation-delay:대기 시간 0s
animation-timing-function:타이밍 함수 ease
animation-iteration-count:반복 횟수 1
animation-direction:반복 방향 normal
animation-fill-mode:전후 상태 none
animation-play-state 재생과 정지 running

해당 속성을 적용하면 html페이지가 로드되었을때 시작한다.

1. animation : animation의 하위 속성들을 한꺼번에 선언할때 사용함.

2. **animation-delay** : 이벤트 발생 또는 페이지 로드 후 몇 초 뒤에 애니메이션을 실행할지 결정함. 단위는 초(s)를 사용한다.

3. **animation-direction** : 애니메이션의 진행 방향을 설정한다
-alternate : from에서 to로 이동했다가 to에서 from으로 이동함.(왔다갔다 왕복할때)
-nomal : 계속 from에서 to로 이동함. (진행방향이같다.)
-reverse : 역방향으로 움직인다.
-alternate-reverse : 역방향으로 움직였다가 정방향으로 움직임.

4.** animation-duration** : 애니메이션 1회당 몇 초 동안 애니메이션을 진행할지 정함. infinite값을 사용하면 무한반복함. 

5. **animation-iteration-count **: 애니메이션의 횟수를 지정함. 몇 번 애니메이션을 실행할지 지정한다. infinite값을 사용하면 무한반복함.

6.** animation-name **: 애니메이션의 이름을 지정함. ★ 애니메이션은 이름이 없으면 실행할 수 없다.

7. **animation-play-state** : 애니메이션을 재생할지 멈출지를 지정함. 보통 hover선택자와 함께 사용한다.기본값은 재생으로, 애니메이션을 멈추고 싶을 땐 paused값을 이용함.

8. **animation-timing-function **: 수치변형함수로 가속도값을 지정한다. 기본값 ease
 -linear(일정/등속도)
 -ease(기본값/관성)
 -ease-in
 -ease-out
 -ease-in-out

[기본형]
@keyframes 애니메이션이름 {
from{ css속성:값;}
50%{css속성:값;}
to{css속성:값;}
}