HTML上でアニメーションを表現する方法は大きく3つあります。
- transition(cssプロパティ)
- animation(cssプロパティ)
- animate(jQuery関数)
アニメーションを一斉に動かしたときに違いがあるのか、検証してみます。

アニメーションの3つの指定方法の違いについて実際に確認してみました!
目次
ボックス幅を100%にする
アニメーションを開始する
transition
animation
animate
animate
だけ少しぎこちない感じに見えますね。transition
とanimation
では特に違いが見られません。
transition
のコード
<div class="taa_transition">transition</div>
.taa_transition {
color: #fff;
background: #00BCD4;
padding: .4em;
margin: 0 0 .6em 0;
width: 100%;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 0;
}
animation
のコード
<div class="taa_animation">animation</div>
.taa_animation {
animation-name: taa_animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes taa_animation {
100% {width: 100%;}
}
animate
のコード
<div class="taa_animate">animate</div>
.taa_animate {
width: 100px;
color: #fff;
background: #00BCD4;
padding: .4em;
margin: 0 0 .6em 0;
}
$(".taa_animate").animate({
"width": "100%"
}, 5000, "linear");
おわり
jQueryのanimate
関数より、CSSのtrasition
やanimation
が滑らかに動くことがわかりました。
実際に試してみることも大事だったりしますね。