9-3. CSS 애니메이션 사용하기 (animation,@keyframs, animation-duration, ..)

1. animation 

CSS3의 animation 속성을 사용하면 자바 스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. 

animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 

 

1️⃣ @keyframs 속성, animation-name 속성 

애니메이션 지점과 이름을 설정하는 속성으로 애니메이션 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다. 

 

이때 애니메이션을 여러개 지정할 때를 대비하여 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다. 

animation-name : 이름

 

2️⃣ animation-duration 속성 

animation-duration 속성은 애니메이션을 얼마동안 재생할 것인지 설정한다. 

이 값을 설정하지 않으면 기본값이 0이라 애니메이션이 실행되지 않는다. 

 

3️⃣ animation-direction 속성 

normal : 애니메이션을 from 에서 to로 진행한다. 

reverse : 애니메이션을 to에서 from으로 진행한다.

alternative: 홀수 번째는 normal로 짝수번째는 reverse로 진행한다. 

alternative-reverse : 홀수번째는 reverse로 짝수번째는 normal로 진행한다. 

 

4️⃣ animation-iteration-count 속성 

애니메이션을 반복해서 보여줄 때 사용하는 속성이다. 

숫자 or infinite

 

5️⃣ animation-timing-function 속성 

트랜지션처럼 animation에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있다.