<div class="aniBox div1">기본값</div>
<div class="aniBox div2">linear</div>
<div class="aniBox div3">ease</div>
<div class="aniBox div4">ease-in</div>
<div class="aniBox div5">ease-out</div>
<div class="aniBox div6">ease-in-out</div>
<div class="aniBox div7">step-start</div>
<div class="aniBox div8">step-end</div>
<div class="aniBox div9">steps(5)</div>
<div class="aniBox div10">steps(5,start)</div>
<div class="aniBox div11">steps(5,end)</div>div{margin:100px; display:inline-block; vertical-align: top; width:100px; height:100px; background:#ccc; border-radius:50%;text-align:center;line-height:100px;}
.ani1{animation: rotateAnimation 1s infinite;}
.ani2{animation: rotateAnimation 1s linear infinite;}
.ani3{animation: rotateAnimation 1s ease infinite;}
.ani4{animation: rotateAnimation 1s ease-in infinite;}
.ani5{animation: rotateAnimation 1s ease-out infinite;}
.ani6{animation: rotateAnimation 1s ease-in-out infinite;}
.ani7{animation: rotateAnimation 1s step-start infinite;}
.ani8{animation: rotateAnimation 1s step-end infinite;}
.ani9{animation: rotateAnimation 1s steps(5) infinite;}
.ani10{animation: rotateAnimation 1s steps(5,start) infinite;}
.ani11{animation: rotateAnimation 1s steps(5,end) infinite;}
@keyframes rotateAnimation {
0%{transform: rotateY(0)}
100%{transform: rotateY(360deg)}
}$(".aniBox").on('click',function(){
index = $(this).index()+1;
for(var i=1;i<=11;i++){
$("div").removeClass("ani"+i);
}
$(this).addClass("ani"+index);
});
External CSS
This Pen doesn't use any external CSS resources.