CSS「transition」vs CSS「animation」vs jQuery「animate」

HTML上でアニメーションを表現する方法は大きく3つあります。

  • transition(cssプロパティ)
  • animation(cssプロパティ)
  • animate(jQuery関数)

アニメーションを一斉に動かしたときに違いがあるのか、検証してみます。

はにわまん
アニメーションの3つの指定方法の違いについて実際に確認してみました!

ボックス幅を100%にする

アニメーションを開始する
transition
animation
animate

animateだけ少しぎこちない感じに見えますね。transitionanimationでは特に違いが見られません。

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のtrasitionanimationが滑らかに動くことがわかりました。

実際に試してみることも大事だったりしますね。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事