デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

CSS3 アニメーション機能を使ってみた transform/transition

アニメーション(transform:transition)
CSS3のアニメーション機能について勉強してみました。
今回の記事は、transformとtransitionについて紹介します。

スポンサーリンク

transformプロパティ

transformは、ボックスを回転・拡大縮小・移動・変形させるプロパティ

ためしに、早速使ってみます。
以下のようにテスト用のボックスを変形させてみます。(以下コード)

テスト
 

上図のように、ボックスを変形させることができました。
なお、transformを使っただけでは、最終的な表示結果なのでアニメーションのように動作させることはできないようです。

transformで指定した値の説明:
translate(100px, 100px) ・・・右へ100px、下へ100px移動させる。
scale(1.5, 1.5) ・・・横方向に1.5倍、縦方向に1.5倍拡大させる。
rotate(45deg) ・・・時計回りに45度回転させる。

transitionを使ってアニメーション

次にtransitionプロパティを使ってアニメーション動作させてみます。

transitionは、連続した動きでなめらかに変化させることができる。
ある状態からそれとは違う別の状態へという二点間の変化しか表現できない。

以下のボックスにマウスを当てると、
ボックスが下へ移動するようにしてみました。(以下コード)

テスト
 
transitionの各プロパティ説明:
transition-property・・・「どのプロパティ」の値が変更されたときにトランジションを実行させるかを設定
transition-duration・・・どれだけ時間をかけて変化させるかの設定
transition-timing-function・・・様々なパターンで速度に変化をつけられる。指定できる値は以下。

ease 加速をつけて、ゆっくり始まり、ゆっくり終わる
ease-in ゆっくり始まり、一定速度で終わる
ease-out 一定速度で始まり、ゆっくり終わる
ease-in-out ゆっくり始まり、ゆっくりと終わる
ease-in-out ゆっくり始まり、ゆっくりと終わる
linear 最初から最後まで一定の速度で変化

最後に

以上、transform/transitionを使って、アニメーション機能を使ってみました。
これを応用すれば、色々と動きのあるサイトが作れそうですね。
なお、CSS3では、animationプロパティを使ったアニメーション機能もあるようです。
また勉強して記事にしてみます。

以上、少しでも参考になれば幸いです。

以下、参考にした書籍

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン