サイトを作成する際に、アニメーション効果を追加したい！という人もいると思います。
アニメーションを実装する方法の１つに animation プロパティというものがありますが、複雑なアニメーションを作成できる分、実装には少し手間がかかってしまいます。
「内容は簡単なもので構わないので、手軽にアニメーションを実装したい！」
という時に便利なのが、transition プロパティです。
今回は、transition プロパティを使ったアニメーションの実装方法について解説していきたいと思います！
CSSのtransitionプロパティとは？
CSSの transition プロパティとは、ある状態から別の状態へと変化する過程を定義するためのプロパティです。
状態が変化しきるまでの秒数や、変化し始めるタイミングを数秒遅らせるなどの効果を指定することができます。
例えば、ボタンにカーソルを合わせた際に色がゆっくりと変化したり、画像にカーソルを合わせた際にサイズを大きく変化させたりなどといった、簡単なアニメーションを実装したいケースに最適なプロパティです。
transitionとanimationの違いは？
transition プロパティと animation プロパティの違いには、大きく分けて以下の４つのポイントがあります。
- 複数の状態を経由することができるか
- ループが可能か
- トリガーが必要か否か
- ユーザーアクションの解除時に戻るアニメーションが入るか
先ほども説明した通り、transition プロパティは2つの状態間の変化の度合いを定義するためのプロパティです。
どの程度のスピードやタイミングで変化するかを指定することはできますが、変化前と変化後の2つの状態以外に別の動作を挟んだり、ループさせることはできません。
一方、animation プロパティでは変化中の状態を複数に分けて設定したり、ループする回数やアニメーション終了後の状態を指定したりなど、詳細に動作を設定することができます。
そのため、複雑な動作のアニメーションを作成したい場合には、transition プロパティよりも animation プロパティの方が使用に適しています。
また、transition プロパティの使用には 「:hover」 や 「:active」 など、アニメーションを実行させるためのトリガーが必要となります。
反対に、animation プロパティはトリガーを設定する必要がなく、ページの読み込み直後や、ページを読み込んだ数秒後にアニメーションを実行するといった指定をすることができます。
その一方で、transition プロパティの場合は、クリックやマウスオーバーなどのユーザーアクションが解除されたと同時に元の状態まで戻るアニメーションが自動で入りますが、animation プロパティにはその機能が用意されていません。
そのため、複雑なアニメーションを作成する必要がなく、アクション時にのみ状態を変化させたい場合には、transition プロパティを採用するケースが多い傾向にあります。
アニメーションの実行タイミングや、実装したい動作の内容に合わせて、適した方のプロパティを使用するといいでしょう。
transitionプロパティの使い方
それでは、実際のコードを元に transitionプロパティの使い方について見ていきましょう。
今回は、以下のサンプルを使って動きを見ていきます。
【基本となるHTML】
<body>
<div class="sampleBox">
<p>サンプルBOX</p>
</div>
</body>【基本となるCSS】
body {
display: flex;
height: 100vh;
margin: 0;
}
.sampleBox {
width: 150px;
height: 60px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
}
.sampleBox:hover {
color: #c71585;
background-color: #ffe0ff;
}【表示内容】
サンプルBOX
マウスカーソルをサンプルの青色のボックス内に置くと背景と文字の色が変わります。
この段階ではまだ、瞬時に状態が切り替わるだけでアニメーション効果は付いていません。
ここに transitionプロパティを使用して、徐々に背景や文字の色が変化するよう設定していきます。
transitionプロパティの基本構文
transition プロパティの書き方には、以下の2種類の方法があります。
・設定したい項目ごとに分けて指定する
・１行にまとめて記述する
項目ごとに指定をする場合は、次のように１つずつプロパティを定義します。
【プロパティの例】
transition-property: color;
transition-duration: 0.3s;これを１行にまとめて記述した場合、次のようなコードになります。
transition: color 0.3s;１行にまとめる場合、基本的には記述する順番に決まりはありませんが、transition-duration（アニメーションの時間）と transition-delay（開始タイミング）は、先に記述した方が transition-duration と認識されます。
transition-* プロパティの一覧と使い方
続いて、transition プロパティで設定可能な項目について解説していきます。
「transition-〇〇」 の形式で使用できるプロパティには、以下の4つがあります。
- transition-property アニメーションを適用する対象のプロパティを定義する
- transition-duration アニメーションの時間を定義する
- transition-delay アニメーションを開始するタイミングを定義する
- transition-timing-function アニメーション変化の度合を定義する
それぞれの項目について、詳しく見ていきましょう。
transition-property
transition-property は、アニメーションを適用する対象のプロパティを定義します。
例えば、以下のように background-color のみを指定すると、背景色だけがゆっくりと変化するようになります。
【サンプルCSS】
.sampleBox {
width: 150px;
height: 60px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
transition-property: background-color;
transition-duration: 0.8s;
}
.sampleBox:hover {
color: #c71585;
background-color: #ffe0ff;
}【表示結果】
サンプルBOX
全てのプロパティに適用したい場合は all を記述するか、省略することでデフォルトで all が適用されます。
transition-duration
transition-duration プロパティは、アニメーションが終了するまでにかかる時間を定義します。
指定する際の単位は 「s(秒)」、もしくは 「ms(ミリ秒)」 を使用します。
【サンプルCSS】
.sampleBox {
width: 150px;
height: 60px;
text-align: center;
color: #ffffff;
background-color: #0000cd;
transition-duration: 2s;
}
.sampleBox:hover {
color: #c71585;
background-color: #ffe0ff;
}【表示結果】
サンプルBOX
値が大きければ大きいほど、ゆっくりと状態が変化します。
transition-delay
transition-delay プロパティは、アニメーションが開始するまでにかかる時間を定義します。
単位は transition-duration プロパティと同様に 「s(秒)」、もしくは 「ms(ミリ秒)」 です。
例えば、以下のコードの場合は1秒後にアニメーションが開始します。
【サンプルCSS】
.sampleBox {
width: 150px;
height: 60px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
transition-duration: 0.8s;
transition-delay: 1s;
}
.sampleBox:hover {
color: #c71585;
background-color: #ffe0ff;
}【表示結果】
サンプルBOX
transition-timing-function
transition-timing-function プロパティは、アニメーション終了までにおける変化の進行度合いを定義します。
指定できる値は、以下の一覧表のとおりです。
| 値 | 説明 |
|---|---|
| ease | 開始時と終了時にゆっくり変化する（初期値） |
| ease-in | 開始時はゆっくり、終了時は早く変化する |
| ease-out | 開始時は早く、終了時はゆっくり変化する |
| ease-in-out | 開始時と終了時に、easeよりもさらにゆっくり変化する |
| linear | 一定の速度で変化する |
| cubic-bezier | 変化の度合いをX軸、Y軸の曲線で指定できる |
【サンプルCSS】
.sampleBox {
width: 150px;
height: 60px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
transition-duration: 1s;
transition-timing-function: ease-in;
}
.sampleBox:hover {
color: #c71585;
background-color: #ffe0ff;
}【表示結果】
サンプルBOX
transitionプロパティがうまく効かないケースと解決策
transitionプロパティはアニメーションの作成に役立つ便利な機能ですが、記述内容や使用する対象によってはうまく動作しないことがあります。
プロパティを使用する上で起こりうる問題点とその解決策について、それぞれ詳しく説明していきたいと思います。
transitionを設定しているプロパティの種類が間違っている
アニメーションを適用するプロパティを指定する際に、誤って他のプロパティ名を記述してしまっているケースが中にはあります。
上手く機能しなかったり、本来のものとは違う要素にアニメーション効果が付いていた場合には、プロパティ名を間違えて指定していないか確認してみるといいでしょう。
また、指定するプロパティによっては、アニメーション効果を付けることそのものが不可能な場合もあります。
色や透明度の変化、あるいは高さや幅の変化など、アニメーションが適用できるプロパティを指定するようにしましょう。
transitionが使用されている疑似クラスが誤っている
transitionプロパティの効果は、定義した疑似クラス（:hover、:activeなど）に対応するアクションにのみ適用されます。
擬似クラスの定義内容を間違ったものにしてしまうと、本来想定していたアクションでアニメーションが実行されなくなったり、変化してほしくないアクションで要素の表示が変わってしまう問題が発生します。
トリガーとなるアクションが間違っていた場合には、擬似クラスの定義内容を見直してみると解決するかもしれません。
インラインレベルの要素にtrasitionプロパティを使用している
transitionプロパティが適用されるのは、基本的にブロック要素のみに限られるため、span や aタグなどのインライン要素に対して使用してもアニメーション効果を付けることはできません。
インライン要素に transitionプロパティを適用させたい場合には、divタグで要素を囲うか、「display:block;」 や 「display:inline-block;」 を指定して、ブロック要素かインラインブロック要素のどちらかに変更するようにしましょう。
transitionプロパティの記述が誤っている
指定するプロパティ名の間違いの他にも、transitionプロパティで記述した値の順番などによっては、想定しない動きをしてしまう可能性もあります。
例えば、アニメーションが終了するまでの時間と遅延時間を逆にしていないか、秒数の単位を間違えて指定していないかなど、指定する内容が正確に記述できているかを見直すのも方法の1つです。
transitionを使ったCSSアニメーションの例
プロパティを一通り確認したところで、実際に transitionプロパティを使用した場合のアニメーションの例を見ていきましょう。
マウスを要素に乗せた時にtransitionを適用する
transition プロパティは、カラーの他にも高さや幅などのサイズ変化にも適用することができます。
【サンプルCSS】
.sampleBox {
width: 150px;
height: 60px;
border-radius: 30px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
transition-duration: 0.5s;
}
.sampleBox:hover {
width: 200px;
height: 120px;
border-radius: 0px;
color: #c71585;
background-color: #ffe0ff;
}【表示結果】
サンプルBOX
透過の度合いを変更したりなども可能なため、メニュー画面の選択モーションなどにも活用することができます。
JavaScriptでtransitionプロパティを制御する
JavaScriptと組み合わせることで、ボタンの押下時に特定の要素を動かすといったアニメーションなども作成できるようになります！
実際の例を見てみましょう。
トリガーとなるイベントや条件に応じてtransitionを適用する
ページが読み込まれたときや、ボタンなどの要素がクリックされたときなど、webページでは何らかの処理が行われるタイミングでイベントが発生します。
JavaScriptとCSSを組み合わせると、このイベントに応じて異なるスタイルを適用することができます。
以下のサンプルコードは、開始ボタンの押下時に状態が変化し、戻すボタンを押すと状態が元に戻る実装例です。
【HTML】
<body>
<button id="startButton">
開始
</button>
<button id="resetButton">
戻す
</button>
<div id="sampleBox">
<p>サンプルBOX</p>
</div>
</body>【CSS】
#sampleBox {
width: 150px;
height: 60px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #0000cd;
transition: 1s ease-in;
}【JavaScript】
const startButton = document.getElementById('startButton');
const resetButton = document.getElementById('resetButton');
const sampleBox = document.getElementById('sampleBox');
startButton.addEventListener("click", () => {
sampleBox.style.color = '#C71585';
sampleBox.style.backgroundColor = '#FFE0FF';
});
resetButton.addEventListener("click", () => {
sampleBox.style.color = '#FFFFFF';
sampleBox.style.backgroundColor = '#0000CD';
});【実装結果】
サンプルBOX
今回はボタン要素をid属性で取得し、そこにイベントリスナーを設定することで、ボタン要素がクリックされたタイミングで色が変化し始めるようになっています。
要素をid属性で取得するのに使用した getElementById メソッドについては、以下の記事で解説しています。
また、クリックしたタイミングで処理が実行されるようにするために使用した addEventListener メソッドについても併せて解説していますので、上のJavaScriptのサンプルで不明な点がある場合は、こちらも読んでみてください！
まとめ
いかがでしたか？今回は、transitionプロパティの使い方について解説をしました。
滑らかなアニメーションを加えることで、Webサイトをリッチな表現で作ることができるようになります。
また、モバイル向けのUIなどで近年よく使われているマテリアルデザインなどに対応したサイトを作るには必須の知識になります。
ぜひ使い方を覚えて、Webサイト作成に活用してみてくださいね！
HTML/CSSの学習方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
HTML/CSSの関連記事
- HTML/CSSとは？関係性や書き方
- HTMLとは？
- HTML頻出タグ一覧
- HTMLで表を作成する方法
- HTMLで文字色を指定する方法
- HTMLでフォントサイズを指定する方法
- HTMLで画像リンクを貼る方法
- HTMLのtableでborder（枠線）を設定する方法
- CSSとは？メリットや基本的な書き方
- CSSで縦書きする方法
- CSSでborder（枠線）を設定する方法
- 【コピペ可】CSS見出しデザイン30選
- CSSのmarginやpaddingで余白指定
- 擬似要素とは？::beforeや::afterの使い方
- 改行ルールの設定方法
- HTMLにCSSをstyleで直書きする方法
- 表（テーブル）のデザイン方法
- CSSで背景画像を指定する方法
- CSS floatプロパティとは？
- HTML要素を横並びにするCSSの新定番「flexbox」とは？
- 要素を好きな位置に配置する「position:absolute;」とは？
- 主軸方向に対する配置を指定する「justify-content」
- テキストや画像の水平方向の配置を指定する「text-align」
- テキストや画像の縦方向の位置を指定する「vertical-align」
- テキストを装飾する「text-decoration」
- 色を指定する「color」
- コンテンツのはみ出しを管理する「overflow」
- フォントを指定する「font-family」
- 文字の太さを指定する「font-weight」
- 字間を調整する「letter-spacing」
- 要素に丸みをつける「border-radius」
- 行間を調節する「line-height」
- 要素や画像に影をつける「box-shadow」
- display:inline、display:block、display:inline-blockの違い
- CSSフレームワーク「Bootstrap」とは？
