CSS 3のアニメーション機能「Transitions」

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

複数のプロパティを同時に変化させるアニメーション

　Transitionsの機能では、複数のプロパティの値を同時に変化させることも可能だ。たとえば、背景色と文字の色、さらに横幅を同時に変化させるには、-webkit-transitionで「background-color」「color」「width」に関する設定を「,（カンマ）」で区切って指定する。

　次のサンプルでは背景が黄色（#ffff00）から紺色（#003366）に、文字の色が黒（#000000）から白（#ffffff）に、横幅が300ピクセルから400ピクセルに変化するように指定している。

サンプル2：カーソルを重ねると背景色、文字の色、横幅が滑らかに変化する

サンプル2：カーソルを重ねると背景色、文字の色、横幅が滑らかに変化する

サンプル2：カーソルを重ねると背景色、文字の色、横幅が滑らかに変化する

サンプル2：カーソルを重ねると背景色、文字の色、横幅が滑らかに変化する

div{
background-color: #ffff00;
color: #000000;
width: 300px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
}

div:hover{
background-color: #003366;
color: #ffffff;
width: 400px;
}

※ブラウザで表示を確認する

　また、位置指定を行うtopやleftプロパティ、回転のような変形処理を指定する-webkit-transformプロパティなどの値を変化させれば、文字や画像にさまざまな動きを設定することができる。

　たとえば、次のサンプルでは、サンプル2に画像と画像のアニメーションに関する設定を追加し、カーソルを重ねると画像が回転しながら左から右に動くように設定している。

サンプル3：カーソルを重ねると花の画像が回転しながら横に動く

サンプル3：カーソルを重ねると花の画像が回転しながら横に動く

サンプル3：カーソルを重ねると花の画像が回転しながら横に動く

サンプル3：カーソルを重ねると花の画像が回転しながら横に動く

img{
position: absolute;
top: 70px;
left: 0;
-webkit-transform: rotate(0deg);
-webkit-transition: left 1s linear, -webkit-transform 1s linear;
}

div:hover img{
left: 400px;
-webkit-transform: rotate(720deg);
}

こんにちは

※ブラウザで表示を確認する

　次回は、CSSによるもう1つのアニメーション機能「Animations」について見ていきたい。