CSS3 アニメーション機能を使ってみた transform/transition
CSS3のアニメーション機能について勉強してみました。
今回の記事は、transformとtransitionについて紹介します。
スポンサーリンク
transformプロパティ
transformは、
ボックスを回転・拡大縮小・移動・変形させる プロパティ
ためしに、早速使ってみます。
以下のようにテスト用のボックスを変形させてみます。（以下コード）
|
1 2 3 |
<div class="animation_test1"> テスト </div> |
|
1 2 3 4 5 6 7 8 |
div.animation_test1{ width: 100px; height: 100px; color: #fff; background: #999; transform: translate(100px, 100px) scale(1.5, 1.5) rotate(45deg); -webkit-transform: translate(100px, 100px) scale(1.5, 1.5) rotate(45deg); } |
テスト
上図のように、ボックスを変形させることができました。
なお、transformを使っただけでは、
transformで指定した値の説明：
translate(100px, 100px) ・・・右へ100px、下へ100px移動させる。
scale(1.5, 1.5) ・・・横方向に1.5倍、縦方向に1.5倍拡大させる。
rotate(45deg) ・・・時計回りに45度回転させる。
translate(100px, 100px) ・・・右へ100px、下へ100px移動させる。
scale(1.5, 1.5) ・・・横方向に1.5倍、縦方向に1.5倍拡大させる。
rotate(45deg) ・・・時計回りに45度回転させる。
transitionを使ってアニメーション
次にtransitionプロパティを使ってアニメーション動作させてみます。
transitionは、
連続した動きでなめらかに変化させることができる。
※ある状態からそれとは違う別の状態へという二点間の変化 しか表現できない。
以下のボックスにマウスを当てると、
ボックスが下へ移動するようにしてみました。(以下コード）
|
1 2 3 |
<div class="animation_test2"> テスト </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div.animation_test2{ width: 100px; height: 100px; color: #fff; background: #999; transform: translate(100px, 100px) scale(1.5, 1.5); -webkit-transform: translate(100px, 100px) scale(1.5, 1.5); } div.animation_test2:hover { transform: translate(100px, 300px) scale(1.5, 1.5); transition-property: transform; transition-duration: 3s; transition-timing-function:ease; -webkit-transform: translate(100px, 300px) scale(1.5, 1.5); -webkit-transition-property: transform; -webkit-transition-duration: 3s; -webkit-transition-timing-function:ease; } |
テスト
transitionの各プロパティ説明：
transition-property・・・「どのプロパティ」の値が変更されたときにトランジションを実行させるか を設定
transition-duration・・・どれだけ時間をかけて変化させるか の設定
transition-timing-function・・・様々なパターンで速度に変化をつけられる。 指定できる値は以下。
transition-property・・・
transition-duration・・・
transition-timing-function・・・
| ease | 加速をつけて、ゆっくり始まり、ゆっくり終わる |
| ease-in | ゆっくり始まり、一定速度で終わる |
| ease-out | 一定速度で始まり、ゆっくり終わる |
| ease-in-out | ゆっくり始まり、ゆっくりと終わる |
| ease-in-out | ゆっくり始まり、ゆっくりと終わる |
| linear | 最初から最後まで一定の速度で変化 |
最後に
以上、transform/transitionを使って、アニメーション機能を使ってみました。
これを応用すれば、色々と動きのあるサイトが作れそうですね。
なお、CSS3では、animationプロパティを使ったアニメーション機能もあるようです。
また勉強して記事にしてみます。
以上、少しでも参考になれば幸いです。
以下、参考にした書籍
スポンサーリンク
関連記事(一部広告含む)
