transitionとkeyframes動作を検証

多く使われているアニメーションでtransitionとkeyframesがありますが、動きがどの様に違うのかを実際のサンプルを見ながら検証してみました。ご使用いただけるソースなどありましたらご自由にお使いください。

簡単にではありますが、それぞれのソースについてご説明させて頂きます。まずは、keyframesのソースを下記に記載しております。

【HTML】

<div class="box">
 <p>keyframes</p>
</div>

【CSS】

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #333;
  margin-bottom: 50px;
}
        
.box:hover{
  animation: anim .5s ease-out forwards;
}
		
@keyframes anim {
  0% {transform: translateX(0);}
  100% {transform: translateX(200px);}
}

上記のコードを見て頂けるとお分り頂けると思いますが、HTMLのboxに対してCSSの@keyframesでアニメーション指示を出しています。CSSのbox:hover内【anim】と@keyframes【anim】が紐付いています。その後、0%、100%と記載されています。0％時はboxがどの場所にあり100％時はboxがどの位置に移動しているかを指示しています。この指示は、20%、50%など自由に増やすことが可能で複雑な動きを指示する事もできます。

次に【transition】のソースを掲載致します。マウスオーバー時ボックスが360度回転するソースです。

【HTML】

<div class="tra_move2">
 <p>transform</p>
</div>

【CSS】

.tra_move2 {
 color:#FFF;
 background:#197BBD;
 width: 200px;
 height: 200px;
 margin-bottom: 50px;
 -moz-transition: -moz-transform 1s linear;
 -webkit-transition: -webkit-transform 1s linear;
 -o-transition: -o-transform 1s linear;
 -ms-transition: -ms-transform 1s linear; 
 transition: transform 1s linear; 
}

.tra_move2:hover {
 -moz-transform: rotateX(360deg);
 -webkit-transform: rotateX(360deg);
 -o-transform: rotateX(360deg);
 -ms-transform: rotateX(360deg);
 transform: rotateX(360deg);
}

CSSに1sやlinearというコード記載されています。1s（変化の速度）、linear（一定のスピードで変化）の様に値を変更する事でアニメーションの表現を変える事ができます。

codepenで様々なサンプルを制作し公開しておりますので、実際にマウスオーバーなどして動作を確認ください。transitionとkeyframesの動きの違いがご理解頂けます。

See the Pen qrJYQo by mitsuox (@puzz) on CodePen.

実際にマウスオーバーし確認頂くと違いが分かり易いと思いますが【transition】は2回転すると逆に2回転して元に戻るのに対し【@keyframes】は2回転した後その状態でアニメーションが止まるという違いがお分り頂いたと思います。transitionは「往復切符」、それに対し @keyframesアニメーションは「片道切符」と表現すると分かり易いかと思います。

まとめ

【transition】は単一的なアニメーションを表現したい場合、【@keyframes】はbackground-colorを複数変更したい場合やオブジェクトを複雑に動かしたい場合など、それぞれに適した使用方法がある事がわかりました。今回の検証で【transition】と【@keyframes】の違いについてご理解頂ければ幸いです。