CSS3 애니메이션

<목차로 돌아가기>

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>