애니메이션이란?

여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법
CSS를 이용해서 애니메이션을 만드는 두가지 방법
1. transition 속성 활용
특정한 이벤트를 기점으로 작동한다.(hover 등)
2. animation 속성과 keyframe활용
시작하기 위한 이벤트가 필요없다.
시작, 정지, 반복까지 제어할 수 있다.
@keyframes 로 애니메이션을 정의하고
정의한 애니메이션을 불러와서 제어해줘야 한다.
조금 귀찮음

keyframe란?

css 애니메이션의 시작, 중간, 끝 등의 중간상태를 정의한다.

@keyframes moveRight{
from {
left:0 ;}
to{
left: 200px;}
}
@keyframes moveRight{
0% {
left:0 ;}
50%{
left: 200px;}
100%{
top:200px;
left:200px;
}
}
keyframes를 요소에 적용하려면, animation속성을 이용하면 된다.

animation

❗animation-name

어떠한 keyframes를 요소에 적용할 것인지 지정
animation-name: moveRight

❗animation-duration

애니메이션을 한 번 재생하는데 걸리는 시간
animation-duration:2s

❗animation-direction

애니메이션 재생방향을 정의한다.

animation-direction: noraml : 정방향으로만 재생

reverse: 역방향으로만 재생

alternate: 정방향으로 재생 .단, 반복 시 정방향/역방향을 번갈아 재생

alternate - reverse: 역방향으로 재생. 단, 반복 시 역방향/정방향을 번갈아 재생

❗animation-iteration-count

애니메이션 재생 횟수를 정의한다.
animation-iteration-count: infinite
기본:0(1번만 재생됨)

❗animation-timing-function

애니메이션 재생 패턴을 정의한다.
transition-timing-function과 유사하다.
animation-timing-function:ease-in-out

❗animation-delay

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

❗단축속성

name-duration-timingfunction-delay-재생횟수-direction
animation: moveRight 0.4s ease-in-out is infinite alternate