css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた

Ads

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; 
}

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