こんにちは、最近エンジニアよりクリエイターと呼ばれる領域に興味が尽きないせぃゆーです。
今日はCSSのトランジションについて書きたいと思います。
そもそもトランジションって何?
CSSでアニメーションを付けられるもので、トランジションは始点と終点しか設定できません。
また自動で発火しないのでマウスオーバー(ホバー)などの発火する条件が必要になります。
始点と終点以外にも変化させたいという場合にはキーフレームを使うといいでしょう。
こちらについては後日投稿しますが、簡単に説明するとトランジションと違い始点/終点以外の複数に変化地点を作成できるものです。
キーフレームについて少しだけ
5秒で色を変化させたい場合
| n秒後 | % | 要素の値 |
|---|---|---|
| 0秒(始点) | 0% | 青色 |
| 1秒後 | 20% | 黄色 |
| 2秒後 | 40% | 緑色 |
| 3秒後 | 60% | 赤色 |
| ４秒後 | 80% | 白色 |
| 5秒後(終点) | 100% | 黒色 |
上記のように各地点においての変化を指定することができるのが、キーフレームです。
トランジションの使い方
CSSでトランジションを行うには4つの項目が存在します。
| プロパティ名 | 意味 | 指定できる値 |
|---|---|---|
| transition-property | 変化の対象のプロパティ | all(初期値、すべてのプロパティに対して) プロパティ名(background-colorなど) |
| transition-duration | アニメーションの時間 | 数値s(秒単位、0.5sで500msと同じ) 数値ms(ミリ秒単位) |
| transition-timing-function | 変化の仕方 | ease（初期値）始点終点は緩やかに変化 linear 始点から終点まで一定に変化 ease-in 始点は緩やかで終点に近づくほど速く変化 ease-out 始点は早くて終点に近づくほど緩やかに変化 ease-in-out 始点終点はかなり緩やかに変化 cubic-bezier 変化の度合いを3次ベジェ曲線で指定 |
| transition-delay | 変化開始のタイミング | 数値s(秒単位、0.5sで500msと同じ) 数値ms(ミリ秒単位) |
transition-timing-functionとtransition-delayについては省略可能です。
プロパティをまとめて記述する
上記のように各プロパティごと別々に記載しても問題はないのですが、transitionプロパティを使うことで1行で書くことができます。
transition: transition-property transition-duration transition-timing-function transition-delay;
transition: background-color 1s ease-in-out 0.5s;こちらについても個別に記載したときと同様にtransition-timing-functionとtransition-delayについては省略可能です。
また個人的にですが、transition-timing-function transition-delayは指定していることはあまり無いような気がします。
簡単なサンプル
ここではdiv要素の背景色をマウスオーバーされたときに赤色に変更しています。
青色の部分をマウスオーバーしてみましょう。
<style>
#transition {
background-color: blue;
width: 100px;
height: 100px;
}
#transition:hover {
background-color: red;
transition: background-color 1s;
}
</style>
<div id="transition">
</div>
まとめ
今回はCSSのトランジションについてまとめました。
今まではHTML&CSSは何となく書いて動かないってことが多々ありましたが、ちゃんと勉強すれば意外となんとかできそうな気がしますね。
コメント