▣ keyframes 정의
@keyframes animationname {
keyframes-selector { css-styles; }
}
▣ 위에서 아래로 움직이는 keyframes 설정
@keyframes box_animation {
from { top: 0px; }
to { top: 200px; }
}
▣ keyframes 안에 퍼센트 단위로 애니메이션 설정
@keyframes box_animation {
0% { 시작값 } /* from */
25% { 변경값 }
50% { 변경값 }
75% { 변경값 }
100% { 변경값 } /* to */
}
▣ 애니메이션 속성의 종류
| animation-name | @keyframes 애니메이션의 이름 지정 |
| animation-duration | 애니메이션의 지속 시간을 초 단위로 설정 |
| animation-timing-function | 애니메이션의 시작과 끝 타이밍 지정 |
| animation-delay | 애니메이션 시작을 지연시키는 시간을 초 단위로 설정 |
| animation-iteration-count | 애니메이션이 반복 재생되는 횟수 설정 |
| animation-direction | 애니메이션의 방향 설정 |
| animation-fill-mode | 애니메이션을 재생하고 있지 않을 때 속성값 설정 |
| animation-play-state | 애니메이션 재생 상태 설정 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
color: white;
position: relative;
animation: boxmove 1s linear infinite alternate;
}
@keyframes boxmove {
form {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<div>애니메이션 박스</div>
<p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다. </p>
</body>
</html>