HTML上でアニメーションを表現する方法は大きく３つあります。
- 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が滑らかに動くことがわかりました。
実際に試してみることも大事だったりしますね。
