別記事でanimationプロパティを使ったCSSアニメーションについてご紹介しました。
animation
プロパティでは@keyframes
とanimation
プロパティの2つを設定する必要があり、複雑なアニメーションに対応できる反面、簡単なアニメーションを実装するには少し冗長です。
もっと手軽なCSSアニメーション向けなのが、当記事で紹介するtransition
プロパティ。この記事では、transition
プロパティの基本的な使い方を解説します。
マウスオーバーやクリックした際の動きを、一瞬の変化ではなく滑らかにできますよ。
transitionなし
box
transitionあり
box
![](https://turicco.com/wp-content/uploads/2023/07/1690628323192-150x150.png)
滑らかな変化が一目瞭然ですね!
transitionとanimationプロパティの違い
CSSのtransition
とanimation
は、どちらもウェブページにアニメーション効果を追加するために使われますが、それぞれ異なる特性と用途があります。
animation | transition | |
---|---|---|
特徴 | 複雑で連続的な動きを作る。 | 状態の変化を滑らかにする。 |
動作のきっかけ | 自動再生(CSSクラスやJavaScriptのクラス追加によって開始される) | トリガーが必要(hoverやactiveなどユーザーの操作) |
設定方法 | @keyframes でアニメーションのステップを定義し、それを要素に適用する。 | @keyframesの設定が必要ない。 |
緩急設定 | ||
遅延設定 | ||
再生回数設定 | (1回のみ再生) | |
ループ | ||
アニメーション方向 | ||
例 | ボールが左右に動くアニメーションなど、複雑なアニメーションに適している。 | マウスオーバー時にボタンの色が変わるなど、シンプルで簡単なアニメーションに適している。 |
違いを一言で
- transition: hoverなどの擬似クラスに対する滑らかなアニメーション効果をつける。
- animation: 自動再生や繰り返し等の細かい設定が必要なアニメーションを作る。
できることが多いanimationが万能というわけではなく、簡単なアニメーション効果はtransitionで十分です。どちらも便利なツールなので目的に合わせて使い分けましょう。
transitionプロパティの基本構文
transitionプロパティでは@keyframesの設定が不要のため、記述はこの基本構文のみです。
.selector {
transition: property duration timing-function delay;
}
セレクタ(.selector部分、どの要素に適用するか)はアニメーションを適用する要素に合わせてください。
セレクタの調べ方を知りたい方はこちらの記事で解説しています。
transitionプロパティの詳細設定
CSSのtransition
プロパティには、詳細な設定を行うためのサブプロパティがいくつかあります。これらを指定することでより柔軟なアニメーションを実現できます。
以下に、各サブプロパティの詳細と使用例を紹介します。
プロパティ名 | 説明 |
---|---|
transition-property | アニメーションを適用する対象のプロパティを定義する |
transition-duration | アニメーションの時間を定義する |
transition-delay | アニメーションを開始するタイミングを定義する |
transition-timing-function | アニメーション変化の度合を定義する |
ひとつずつ解説します。
transition-property
アニメーションの対象になるCSSプロパティを指定します。特定のプロパティをアニメーションさせたい場合に使います。
- プロパティを特定しない場合は省略しても大丈夫です。
- 「all」を指定するとプロパティすべてが対象になります。
.box {
transition-property: background-color;
}
transition-duration
アニメーションの所要時間を設定します。値は秒(s
)またはミリ秒(ms
)で指定します。このtransition-durationの記述がないと動きは滑らかにはならないため必須です。
.box {
transition-duration: 1s;
}
transition-timing-function
アニメーションの進行速度を制御します。指定しない場合は初期値のease
が適応されます。
.box {
transition-timing-function: ease;
}
以下の値がよく使われます。
ease
: ゆっくり始まり、途中で速くなり、最後にまたゆっくりになるlinear
: 一定の速度ease-in
: ゆっくり始まり、途中から速くなるease-out
: 速く始まり、途中からゆっくりになるease-in-out
: ゆっくり始まり、途中で速くなり、最後にまたゆっくりになる
アニメーションの進行速度の違いを、実際の動作で比べてみてくださいね。
transition-timing-functionの実際の動作
ease
linear
ease-in
ease-out
ease-in–out
transition-delay
アニメーションが開始されるまでの遅延時間を設定します。値は秒(s
)またはミリ秒(ms
)で指定します。遅延しないときは省略できます。
.box {
transition-delay: 0.5s;
}
transitionアニメーションの動作のきっかけ(トリガー)となる疑似クラス
CSSのtransition
プロパティは、特定のイベントや条件が発生したときにスタイルの変化をスムーズにアニメーションとして表示するために使用されます。その変化を引き起こすトリガーとなるのが「疑似クラス」です。以下に、主な疑似クラスとその動作を紹介します。
- :hover
- ユーザーが要素にマウスポインターを乗せたときに適用される疑似クラスです。一般的にボタンやリンクのスタイル変更に使われます。
- :active
- ユーザーが要素をクリックしている(マウスボタンを押している)間に適用される疑似クラスです。クリック中の視覚フィードバックとして使用されます。
- :checked
- チェックボックスやラジオボタンがチェックされたときに適用される疑似クラスです。フォーム要素のスタイル変更に使われます。
- :focus
- ユーザーが要素にフォーカスを当てたときに適用される疑似クラスです。フォーム要素やリンクなどに使われます。
他にもなど、特定の子要素にスタイルを適用する疑似クラスがあります。これらもプロパティと組み合わせて使うことができます。
transitionプロパティの基本的な使い方
transition
プロパティの基本的な使い方をみていきましょう。
背景色の変更
マウスオーバー時(:hover
)に背景色が変わる簡単な例です。この例では、.box-1
クラスの要素に対して、マウスオーバー時に背景色がグレーから黄色に0.5秒かけて変わります。
\実際にマウスのせてみてね/
transitionなし
box-1(アニメーションなし)
<div class="box-1"></div>
.box-1 {
background-color: lightgray;
}
.box-1:hover {
background-color: yellow;
}
transitionあり
box-1
<div class="box-1"></div>
.box-1 {
background-color: lightgray;
transition: background-color 0.5s ease;
}
.box-1:hover {
background-color: yellow;
}
アニメーションなしの場合にはマウスオーバーした瞬間に一瞬で背景色が変わっているのが分かります。アニメーションをつけた滑らかな変化の方が心地よく感じるのではないでしょうか。
![](https://turicco.com/wp-content/uploads/2023/10/1698139209756.png)
比較するとアニメーション効果が一目瞭然だね!!
transition-propertyは指定不要
ちなみに、アニメーション対象のCSSプロパティ(background-color
)を指定しなくても同様に動作します。このプロパティを省略する、もしくは「all」を指定するとプロパティすべてが対象になります。
.box-1 {
background-color: lightgray;
transition: all 0.5s ease;
}
.box-1:hover {
background-color: yellow;
}
![](https://turicco.com/wp-content/uploads/2023/07/1690628303931-150x150.png)
背景色を変更するときにtransition: all 0.5s easeよく使っています!
サイズの変更
次に、マウスオーバー時(:hover)にサイズが変わる例です。この例では、.box-2
クラスの要素に対して、マウスオーバー時に幅が100pxから300pxに1秒かけて変わります。
\実際にマウスのせてみてね/
transitionなし
box-2
<div class="box-2"></div>
.box-2 {
width: 100px;
background-color: pink;
}
.box-2:hover {
width: 300px;
}
transitionあり
box-2
<div class="box-2"></div>
.box-2 {
width: 100px;
background-color: pink;
transition: width 1s ease-in-out;
}
.box-2:hover {
width: 300px;
}
複数のプロパティの変更
複数のプロパティを同時に変更する例です。この例では、.box-3
クラスの要素に対して、マウスオーバー時に幅が100pxから300pxに1秒かけて、背景色が黄色から水色に0.5秒かけて変わります。
\実際にマウスのせてみてね/
transitionなし
box-3
<div class="box-3"></div>
.box-3 {
width: 100px;
background-color: yellow;
}
.box-3:hover {
width: 300px;
background-color: lightblue;
}
transitionあり
box-3
<div class="box-3"></div>
.box-3 {
width: 100px;
background-color: yellow;
transition: width 1s, background-color 0.5s;
}
.box-3:hover {
width: 300px;
background-color: lightblue;
}
![](https://turicco.com/wp-content/uploads/2023/10/1698138929377-150x150.png)
要素ごとに一回分の動作時間を変えて、それぞれがぬるーっと動くのがいいね!
まとめ
今回はCSSアニメーションのtransitionプロパティについて紹介しました。
transition
プロパティを使うとシンプルなコードで滑らかな動きを実現できるのでホバーアクションを追加する際などにぜひ使ってみてください。
より細かなアニメーションを追加したい場合はanimationプロパティを使用します。この記事の例を参考にして、ウェブサイトに動きを加えてみましょう。
Comment コメントはこちらへ