初心者きつねCSSのアニメーションをかける時、transitionやkeyframesを使うと良いってよく聞くけど、ぶっちゃけどう違うの？
そう悩んでしまった経験がある方も多いのではないでしょうか？
今回は、CSSでアニメーションを当てたい時によく使用される、transitionプロパティの使い方と
keyframesとの使い分け方法について解説していきます。
しかし、transitionとkeyframeのCSSの書き方は似ている部分がありますので、keyframesに対応できるようにするためにも、ぜひ記事を最後まで読んでいただきたいと思います。
また、タイピング風にテキストを表示させるCSSアニメーションを、keyframesで実装する方法について書いた記事もありますので
こちらもぜひ読んでみてください！
transitionとは？
transitionとはCSSのプロパティの1つで、主にアニメーションや動きをつけるために使用します。
・ボタンにカーソルを当てた際にふわっと押されたり、離すとふわっと戻る
・ホバーすると、円の背景色が徐々に変化していく
このようなアニメーションを作りたい場合は、transitionプロパティで実現することができます。
transitionプロパティは、主に動きをつけたい時やCSSアニメーションを実装したい時に使う」と覚えておきましょう。
transitionプロパティの当て方
transitionプロパティは、「ショートハンド」という当て方をすることができます。
ショートハンドとは、プロパティの詳細を1行で指定できる書き方のこと。
ショートハンドが使えるので、下のように記述することが可能です。
transition: all .5s 2s linear;それぞれの値の意味は、左から順に
・transition-duration：transitionプロパティの実行時間
・transition-delay：transitionプロパティの実行から何秒遅らせるか
・transition-property：実行するアニメーションの名前
・transition-timing-function：変化の仕方
になります。
この4つのうち、transition-propertyとtransition-durationは必ず付けなければなりませんが、設定されていない場合は初期値が設定されます。
transition-propertyの初期値はall、transition-durationの初期値は0sです。
transition-propertyに何も指定をしないとallになり、allでは全ての要素に動きが当たります。
また、transition-durationの初期値は0s、つまり0秒なので何も指定しないとアニメーションは発動しません。
また、transitionプロパティはショートハンドで当てるという話をしましたが、少し面倒くさいですが
上の4つの指定をそれぞれで行っていくこともできます。
つまり
transition-property: all
transition-duration: .5s
transition-delay: 2s
transition-: linear;などという感じで当てることもできます。
transitionとkeyframeの違い
CSSでアニメーションを制作する際によく利用されるのが
・transition
・keyframe
この2つのプロパティになります。
しかし、この2つにはどのような違いがあるのでしょう？
結論から言うと、アニメーションの変化具合を細かく調整したいかどうか、になります。
transitionは、最初と最後だけを決める
transitionは、最初と最後の状態だけを決める
transitionプロパティでは、アニメーションの最初の状態と最後の状態だけを設定することが多いです。
中間点などの間の部分は、最初と最後に決めた状態を保つように変化していきます。
例えば、以下のようなCSSをtransitionで当てます。
状態の変化を伴う場合は、transitionを利用する場合が多い
また、「状態の変化を伴う場合」には、transitionを利用する場合が多いです。
例えば、ホバーした際にボタンが押し込まれたり、ボタンの色を変化させるような処理を行う場合などですね。
keyframeは、どちらかというと途中の状態などを細かく設定することが多い
一方、keyframeはどうでしょうか？
keyframeでも、transitionのように最初と最後の状態のみを設定することもできますが、どちらかというと途中の状態などを細かく設定することが多いです。
また、別のCSSでアニメーション名を設定する必要がある点もtransitionと異なります。
transitionはプロパティの名前を指定しましたが、keyframesでは自分でアニメーション名を設定する必要があります。
keyframeは、以下のような使い方をします。
.circle {
animation: bg-change 2s ease-in;}
@keyframes bg-change {
0% {
background: red;
}
100% {
background: blue;
}
}これは、最初の状態は背景色を赤色にし、変化の最後で背景色を青色にするというアニメーションです。
別のCSSで付けたアニメーション名の前に、@keyframesと付けて、それぞれの状態（今回は0%と100%の状態）を指定することでアニメーションを作ることができます。
もし、75%の状態で背景色を緑にしたかったら、次のように書くことができます。
.circle {
animation: bg-change 2s ease-in;}
@keyframes bg-change {
0% {
background: red;
}
75% {
background: green;
}
100% {
background: blue;
}
}また、最初と最後の状態を設定するだけだったら、以下のように書くこともできます。
@keyframe bg-change {
from {
background: red;
}
to {
background: blue;
}
}ただ、先にも言及した通り
75%の状態を挟んだ時のように、keyframeではより細かい状態を付与したアニメーションをつけることが多いです。
0%や100%の状態だけではなく、transitionではできないような
5%や20%などの、細かい状態を決めることができるのがkeyframesの特徴です。
transitionの実装
transitionの使い方と、keyframesとの違いは理解できましたか？
では、さっそくtransitionを利用したCSSアニメーションの実装をしていきたいと思います。
ホバーすると円がだんだん透明になっていくアニメーション
今回は、ホバーすると円がだんだん透明になっていくアニメーションを実装していきたいと思います。
See the Pen ホバーすると円が薄くなるアニメーション by わい (@y_programing) on CodePen.
HTMLはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>CSSはこちら。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle {
width: 200px;
height: 200px;
margin: 20px;
background-color: lightgreen;
border-radius: 50%;
transition: opacity 1s;
}
.circle:hover {
opacity: 0.3;
}最初は1だったopacityが、ホバーした際に1秒で0.3のopacityになるように実装しています。
先ほど解説した、transition-propertyがopacity、transition-durationが1秒、ということですね。
透明になる時間を遅らせる
では、今度はtransition-delayを利用して、透明になる時間を遅らせてみましょう。
.circleというCSSセレクタのtransitionプロパティを、以下のように変更してください。
.circle {
width: 200px;
height: 200px;
margin: 20px;
background-color: lightgreen;
border-radius: 50%;
transition: opacity 1s 3s;
}transition-delayを3秒に設定したので、ホバーしてから3秒してから透明になります
（ホバーしてから透明になるまで結構長く感じるかもしれませんが、気長に待ちましょう！笑）。
See the Pen ホバーすると円が薄くなるアニメーション（delay3秒ver） by わい (@y_programing) on CodePen.
このように、ショートハンドで実行時間や実行までの時間を好きなように変更することができます。
円が左から右に移動するアニメーション
今度は円が左から右に移動するアニメーションを実装していきたいと思いますが
linearやease-inやease-outなどの変化も一緒に見ていきたいと思います。
linearやease-inやease-outなどは、transition-timing-functionで設定できる値のことで
・transition-timing-function：linearは、開始から終了まで一定の速度で
・transition-timing-function：ease-inは、だんだん遅くなっていく
・transition-timing-function：ease-outは、だんだん速くなっていく
というような効果です。
ちなみに、transition-timing-functionの初期値はeaseであり、アニメーション開始時と終了時は変化がゆっくりになり、中間点で最も速くなります。
今回は、円が左から右に2秒かけて、50px分だけ動くアニメーションを作成しました。
まずは、linearの状態からです。
See the Pen 円が左から右に移動するアニメーション（linear） by わい (@y_programing) on CodePen.
HTMLはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>CSSはこちら。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle {
width: 200px;
height: 200px;
margin: 20px;
background-color: lightgreen;
border-radius: 50%;
transition: transform 2s linear;
}
.circle:hover {
transform: translateX(100px);
}linearだと、ホバーすると一定速度で進んでいることが分かりますね！
続いては、ease-inです。
See the Pen 円が左から右に移動するアニメーション（ease-in） by わい (@y_programing) on CodePen.
ease-inを利用すると、最初の動きは速いですが、横に50px移動し終わる頃には遅くなってますね。
最後は、ease-out。
See the Pen 円が左から右に移動するアニメーション（ease-out） by わい (@y_programing) on CodePen.
こちらは、最初の動きは遅いですが、だんだん速くなっていますね。
このようにtransitionを利用すれば、どのタイミングでどのような速さで動くのかも指定できるので
自分がしたい動きをさせることができ、応用も効きます。
まとめ
transitionが理解できたら、keyframesの方も理解しておきましょう。
こちらの記事でkeyframesを利用したコーディングについて解説しているので、ぜひ覗いてみてください。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント