CSS 를 이용해서 애니메이션을 만드는 두가지 방법
transition 속성 활용•
transition은 특정 이벤트를 기점(hover 등)으로 작동한다.
•
animation 속성과 keyframe 활용•
시작하기 위한 이벤트가 필요 없다.
•
애니메이션의 시작, 정지, 반복까지 제어가 가능하다.
@keyframes
CSS 애니메이션의 시작, 중간, 끝 등의 중간 상태를 정의한다. 작성 방법/* keyframe 작성 방법 */
@keyframes 애니메이션이름 {
from {
left : 0;
}
to{
left : 200px;
}
}
/* keyframe 작성 방법 */
@keyframes 애니메이션이름{
0% {
left : 0;
}
50%{
left : 200px;
}
100%{
top : 200px;
left : 200px;
}
}
CSS
복사
animation
animation-name : 어떠한 keyframes를 요소에 적용할 것인지 지정한다. animation-duration : 애니메이션을 재생하는 데 걸리는 시간을 설정한다. animation-direction : 애니메이션 재생 방향을 정의 합니다. (정방향/역방향)normal | 정방향으로 재생 | alternate | 정방향/역방향을 번갈아 재생 |
reverse | 역방향으로 재생 | alternate-reverse | 역방향/정방향을 번갈아 재생 |
animation-iteration-count : 애니메이션 재생 횟수를 정의 합니다. animation-timing-function : 애니메이션 재생 패턴을 정의하며, transition-timing-function 과 유사하다. animation-delay : 애니메이션 시작을 얼마나 지연할 지 설정합니다. animation 단축속성애니메이션 카테고리에 속한 속성들도 단축 속성으로 모아서 지정 해줄 수 있다. 만일 순서가 바뀔 경우 오류가 발생 하거나 의도와 다른 결과가 도출 될 수 있으니 순서에 유의하자
