<title>CSS3 Animation</title>
-webkit-animation-name: movingPara;
-webkit-animation-duration: 4s;
animation-name: movingPara;
@-webkit-keyframes movingPara {
0% { border-color: red; transform: rotateX(0deg); }
20% { border-color: orange; }
40% { border-color: yellow; }
50% { border-color: green; transform: rotateX(180deg); }
60% { border-color: blue; }
80% { border-color: navy; }
100% { border-color: purple; transform: rotateX(360deg); }
0% { border-color: red; transform: rotateX(0deg); }
20% { border-color: orange; }
40% { border-color: yellow; }
50% { border-color: green; transform: rotateX(180deg); }
60% { border-color: blue; }
80% { border-color: navy; }
100% { border-color: purple; transform: rotateX(360deg); }
-webkit-animation-iteration-count: 2;
animation-iteration-count: 2;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
<p id="one">이 애니메이션 효과는 두 번 반복될 거에요!</p>
<p id="loop">이 애니메이션 효과는 영원히 반복될 거에요!</p>