
CSS 3のアニメーション機能「Transitions」
CSS 3のアニメーション機能を利用すれば、文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScriptが必要だった処理をCSSで実現できるようになる。
CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類が用意されており、いずれもCSSのプロパティ値を変化させることで動きを設定する。たとえば、background-colorプロパティの値を変化させれば、背景色が変化するアニメーションを設定できるというわけだ。
このとき、Transitionsでは動きの始点と終点の2つの値だけを指定する仕組みになっているのに対して、Animationsではキーフレームによる細かな指定ができるようになっている。
今回はこれらのうち、Transitionsの機能を利用したアニメーションを紹介したい。
なお、Transitionsの機能はW3Cの草案(Working Draft)「CSS Transitions Module」として提案されており、現在のところSafari 3.1とGoogle Chrome 2以上が対応している。また、Firefoxはバージョン3.5では未対応となっているが、将来的なバージョンでのサポートを予定している。
背景色が変化するアニメーション
それでは、実際にTransitionsの機能を利用して背景色が変化するアニメーションを作成してみよう。次のサンプルでは




div{ background-color: #ffff00; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; } div:hover{ background-color: #00ffff; }
こんにちは
※ブラウザで表示を確認する
このサンプルではまず、アニメーションの始点となる黄色の背景色をdiv {background-color:〜}で、終点となる水色の背景色をdiv:hover {background-color:〜}で指定している。
次に、値を変化させたいプロパティを-webkit-transition-propertyで指定する。サンプルでは背景色の値を変化させたいので「background-color」と指定する。
あとはアニメーションに関する細かな設定だ。-webkit-transition-durationでは値を変化させる時間を、-webkit-transition-timing-functionでは始点と終点の2つのキーフレーム間の補間方法を指定する。サンプルではそれぞれ「1s」「linear」と指定して、1秒の間に一定のスピードで背景色が変化するように指定している。
なお、これらの設定は-webkit-transitionプロパティで1つにまとめて指定することもできる。その場合、次のようにproperty、duration、timing-functionの順に半角スペースで値を区切って指定する。
div{ background-color: #ffff00; -webkit-transition: background-color 1s linear; } div:hover{ background-color: #00ffff; }
※ブラウザで表示を確認する
複数のプロパティを同時に変化させるアニメーション
- 新着記事
- 特集
- ブログ
- 企画特集
-
特集:IT最適化への道
-
企業のリスクマネージメント対策に
-
その先へ
-
データの散在と非常率運用がネック
-
厳しい目が向けられる内部不正
-
M365 活用のセキュリティ対策
-
いまあるデータで身近な業務をDX
-
次の一手はこれだ!
-
デジタルを当たり前と言えるか?
-
部分最適だけではダメ
-
明日からではもう遅い?!
-
第4回CNBFミートアップレポート
-
連載!プロが語るストレージ戦略
-
DX時代のアプリケーションセキュリティ
-
セキュリティの今を知る
-
連載!プロが語るストレージ戦略
-
クラウド活用 虎の巻
-
漫画で解説:IoTはじめの一歩
-
IDaaSって何?
-
クラウド時代に理想のセキュリティ
-
リモート、オフィス、オンサイト
-
ネットワークもサービスとして使う
-
未来のセキュリティイノベーターへ
-
ビッグデータ最前線!
-
連載!プロが語るストレージ戦略
-
ゼロトラストに向けた道のりを支援
-
SECCON2020レポート第二弾!
-
SoRとSoEをつなぐDX推進の要
-
次期自治体ネットワーク強靭化へ
-
いまさら聞けない「PPAP」
-
ハイブリッドクラウドとAI
-
性能の大幅向上を実現!
-
コスト・運用の壁を崩す!