css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。
css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。
- プロパティ：-webkit-transition
- 対応ブラウザ：webkit系(GoogleChrome、Safari等)
- JavaScript：未使用
（※ソース閲覧の部分はjsを使っています）
一応アニメーション以外（角丸など）は-mozも入れています。
サンプルなので「-webkit-transition: *s ease-in-out」のみを使用。これ1つでどういう事が出来るか、というテストです。*sは時間を表します。:hoverにしているのでマウスを乗せてご確認下さい。
例その1・border-radius（角丸）と一緒に使う
角丸のみ
角が
角丸になります
角丸になります
▼ソース
.anime01{ background:#000; color:#fff; padding:25px;-webkit-transition: 1s ease-in-out;}.anime01:hover{ -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 50px; } |
角丸でボーダー（枠線）も変更
枠が
変わります
変わります
▼ソース
.anime01a{ background:#000; color:#fff; padding:25px; border:10px #800000 solid ;-webkit-transition: 1s ease-in-out;}.anime01a:hover{ -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 50px; border:10px #800000 dotted ;} |
枠はアニメーションしませんね。。
例その2・transform（変形）と一緒に使う
skew
ゆっくりと
曲がっていきます
曲がっていきます
▼ソース
.anime02{ background:#000; color:#fff; padding:25px;-webkit-transition: 1s ease-in-out;}.anime02:hover{-moz-transform: skewY(-15deg);-webkit-transform: skewY(-15deg);} |
rotate
360度
回転します
回転します
※真ん中にマウス乗せるとスムーズに回ります
▼ソース
.anime02a{ background:#000; color:#fff; padding:25px;-webkit-transition: 1s ease-in-out;}.anime02a:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);} |
rotate その2
高速で
回転します
回転します
▼ソース
.anime02b{ background:#000; color:#fff; padding:25px;-webkit-transition: 5s ease-in-out;}.anime02b:hover{-moz-transform: rotate(36000deg);-webkit-transform: rotate(36000deg);} |
例その3・shadow（影）と一緒に使う
box-shadow
影が
出てきます
出てきます
▼ソース
.anime03{ background:#000; color:#fff; padding:25px;-webkit-transition: 1s ease-in-out;}.anime03:hover{-moz-box-shadow: 10px 3px 15px #800000;-webkit-box-shadow: 10px 3px 15px #800000;} |
例その4・テキストに使う
大きくする
大きくなります
▼ソース
.anime04{ font-size:15px; color:#000; padding:25px;-webkit-transition: 0.3s ease-in-out;}.anime04:hover{ font-size:65px;} |
色を変える
色が変わります
▼ソース
.anime04a{ font:35px bold; color:#000; padding:25px;-webkit-transition: 1s ease-in-out;}.anime04a:hover{ color:#ff0000;} |
text-shadow
テキストから影がでます
▼ソース
.anime03a{ font:25px bold; color:#000; padding:25px;-webkit-transition: 1s ease-in-out;}.anime03a:hover{text-shadow: 10px 3px 15px #800000;} |
飛ばす
横に飛ばします
▼ソース
.anime04b{ font:35px bold; color:#000; padding:25px;-webkit-transition: 1s ease-in-out;}.anime04b:hover{text-indent:-999px;} |
反転させる
反転させます
▼ソース
.anime04c{ font:35px bold; color:#000; padding:25px;-webkit-transition: 0.3s ease-in-out; text-align:center;}.anime04c:hover{-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);-moz-transform: matrix(-1, 0, 0, 1, 0, 0);transform: matrix(-1, 0, 0, 1, 0, 0);filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);} |
分身させる
m9（｀・ω・´)
▼ソース
.anime04d{ font:35px bold; color:#000; padding:25px;-webkit-transition: 0.3s ease-in-out; text-align:center;}.anime04d:hover{text-shadow: 0 40px #ff0000,0 -40px #0000ff,200px 0 #008000,-200px 0 #ffc0cb;} |
青（#0000ff）と緑（#008000）がアニメーションしません。
※当時しませんでしたが、ブラウザのバージョンがあがって現在は不具合は解消された模様です。
分身させるその2
分身させます
▼ソース
.anime04e{ font:35px bold; color:#000; padding:25px;-webkit-transition: 2s ease-in-out; text-align:center;}.anime04e:hover{text-shadow: 0 20px #ff0000,0 40px #0000ff,0 60px #008000,0 80px #ffc0cb,0 -20px #ff0000,0 -40px #0000ff,0 -60px #008000,0 -80px #ffc0cb;} |
背景を付ける
背景が出ます
▼ソース
.anime04f{ font:35px bold; color:#000; padding:25px;-webkit-transition: 1s ease-in-out;}.anime04f:hover{ background:#ffd700; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 50px; } |
以上サンプルでした。簡単なもので済みません。まだ対応ブラウザは少ないですが、コンテンツに少しスパイスを与える感じで利用するのもいいかも。
