애니메이션 효과는 HTML 요소에 적용되는 CSS스타일을 다른 CSS스타일로 부드럽게 변화시킨다. transition이 단순히 요소의 속성 변화에 중점을 둔다면 animation 속성은 하나의 줄거리를 구성하여 세부 움직임을 시간흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
position: absolute;
width: 140px;
height: 140px;
background: purple;
padding: 30px;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes move {
from{
left : 0;
}
to{
left : 300px;
}
}
</style>
<title>Document</title>
</head>
<body>
<div>Animation</div>
</body>
</html>위 코드를 실행시키면 div박스가 left : 0 지점에서 left : 300px지점까지 3초동안 이동한다.
move 라는 이름의 keyframe을 만들어 요소에 지정해주어 keyframe을 실행시킨다.
from 과 to 대신 %로 대체할 수 있다.
1.animation-name
animation-name속성을 이용하여 사용하고자 하는 @keyframes rule을 선택한다. 하나 이상의 애니메이션 이름을 지정할 수 있다.
2.animation-duration
한 싸이클의 애니메이션에 소요되는 시간을 초 or 밀리 초 단위로 지정한다.
이 속성이 빠진다면 기본값 0s로 지정되어 아무 애니메이션도 실행되지 않는다.
3.animation-timing-function
transition-timing-function과 같이 애니메이션의 리듬을 지정한다
4.animatin-delay
요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이 대기하는 시간을 지정한다.
5.animation-iteration-count
애니메이션 주기의 반복횟수를 지정한다. 기본값은 1이고 infinite로 무한반복 할 수 있다.
6.animation-direction
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
- normal : 기본값으로 from(0%)에서 to(100%)로 진행
- reverse : to(100%)에서 from(0%)로 진행
- alternate : 홀수번째는 normal로 짝수번째는 reverse로 진행
- alternate-reverse : 짝수번째는 normal로 홀수번째는 reverse로 진행
7.animation-play-state
애니메이션 재생 또는 중지 상태를 지정한다. 기본값은 running이다.
