CSS3で簡単なアニメーションを作成(1)

CSS3のtransitionプロパティで、簡単なアニメーション機能が表現できます。

リンクです。

.anime1 {
transition:3s;
 background-color:#CCC;
}

.anime1:hover {
 background-color:#0000FF;
}

.anime2 {
transition:3s;
color:#000;
}

.anime2:hover {
color:#FF0000;
}

.anime3 a {
transition:1s;
color:#0000FF;
text-decoration:underline;

}

.anime3 a:hover {
color:#FF0000;
}

上記例では各文字にマウスオンすると、背景色・文字色等がなめらかに変化します。
transitionプロパティでは、 transition-property、 transition-duration、transition-timing-function、
transition-delayの各プロパティの値をまとめて指定できます。

各プロパティの詳細についてはHTMLクイックリファレンスさんの

transition－CSS3リファレンス

のページが参考になるかと思います。

※なお、transitionプロパティはIE9以下では対応していないのでその点は注意が必要です。

コメントを投稿する