CSS3 애니메이션
@Keyframes
Keyframes를 이용해 키 프레임을 지정한다 키프레임의 위치는 퍼센트로 지정하며 각 키프레임에서 속성의 값을 지정하면 된다.
@keyframes ani/*키프레임을 ani라는 이름으로지정*/
{
0% {left : 0px; top 0px;}
25% { left 100px; top 20px;}
50% { left 200px; top 20px;}
75% { left 300px; top 20px;}
100% { left 400px; top 20px;}
}
div{
animation : 2s ani; /*애니메이션의 지속시간과 프레임 규칙이름 */
animation-interation-count:20;/*애니메이션의 반복 횟수*/
}
무한반복 애니메이션
@-webkit-keyframes bounce{
from, to{
bottom:0px;
-webkit-animation-timing-function:ease-out; /*ease-out 목표에 다다를수록 움직임이 감소*/
}
50% {
bottom:200px;
-webkit-animation-timing-function:ease-in; /*ease-in은 천천히 시작하는 것*/
}
}
#ball{
position: absolute;
width:20px;
height:20px;
background:red;
border-radius:10px;
-webkit-animation-name:bounce;
-webkit-animiation-iteration-count:infinite;
-webkit-animation-duration:5s;
}
<div id="ball"> </div>