この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。
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;
}
以上サンプルでした。簡単なもので済みません。まだ対応ブラウザは少ないですが、コンテンツに少しスパイスを与える感じで利用するのもいいかも。
