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

でマークアップした部分にカーソルを重ねると、背景が黄色（#ffff00）から水色（#00ffff）に変化するように指定している。なお、カーソルを外すと背景は水色から黄色に戻る。

サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する

サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する

サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する

サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する

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;
}

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

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