CSS3 の transition プロパティでアニメーションさせてみよう!!
CSS3 には transition というプロパティがあり, これを指定することで簡単にアニメーションを付けることができます. サンプルをいくつか作ってみたので参考までに.全て hover することで変化するようにつくっています.
他のCSS プロパティ同様(IE意外は)簡単に設定, 動作させることができるのでよかったら試してみてください. 実際にこのブログでも使っています.記事に hover した際に縁に表示される影や, サイドバーのリンクを hover した際の拡大などに使用しています.
注意点としては, CSS3 なのでベンダープレフィックスの記述が必要です. 必要に応じて対応したいブラウザのベンダープレフィックスを記述してください.
.sample { -webkit-transition: ...; -moz-transition: ...; -o-transition: ...; transition: ...; }
また, このブログの Read More が光っているのは, webkit 限定の animation プロパティを使用しています. こちらも transition と似たような機能なのですがよりプログラムっぽく使えます. animation に関しても近々書く予定です.
Memo : transition は, 移り変わり,推移,変化,変遷といった意味.
色を変化させてみよう
色を変化させてみよう!!
SAMPLE
CODE
.transition00 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; background-color: red; } .transition00:hover { background-color: blue; }
色を透過させてみよう
色を透過させてみよう!!
SAMPLE
CODE
.transition01 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; background-color: rgba(255, 0, 0, 0.2); } .transition01:hover { background-color: rgba(255, 0, 0, 1.0); }
テキストやボックスに影を表示してみよう
テキストやボックスに影を表示してみよう!! CSS の box-shadow, text-shadow プロパティを指定することで影を表示することができます.
SAMPLE
CODE
.transition02 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .transition02:hover { -webkit-box-shadow: 5px 5px 15px #000; -moz-box-shadow: 5px 5px 15px #000; -o-box-shadow: 5px 5px 15px #000; box-shadow: 5px 5px 15px #000; -webkit-text-shadow: 2px 2px 0px #fff; -moz-text-shadow: 2px 2px 0px #fff; -o-text-shadow: 2px 2px 0px #fff; text-shadow: 2px 2px 0px #fff; }
移動させてみよう
移動させてみよう!! CSS3 の transform プロパティに translate(x値, y値)を指定することで移動させることができます.
SAMPLE
CODE
.transition03 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .transition03:hover { -webkit-transform: translate(40px, 20px); -moz-transform: translate(40px, 20px); -o-transform: translate(40px, 20px); transform: translate(40px, 20px); }
回転させてみよう
回転させてみよう!! CSS3 の transform プロパティに rotate(deg値)を指定することで回転させることができます.
SAMPLE
CODE
.transition04 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .transition04:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
拡縮させてみよう
拡縮させてみよう!! CSS3 の transform プロパティに scale(x値, y値)を指定することで拡縮させることができます.
SAMPLE
CODE
.transition05 { -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .transition05:hover { -webkit-transform: scale(2.0, 2.0); -moz-transform: scale(2.0, 2.0);; -o-transform: scale(2.0, 2.0);; transform: scale(2.0, 2.0);; }
[…] トランジションアニメーションについてはこちら. […]