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;
}
以上サンプルでした。簡単なもので済みません。まだ対応ブラウザは少ないですが、コンテンツに少しスパイスを与える感じで利用するのもいいかも。
