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

スポンサーリンク

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

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

URL :
TRB :

Comments & Trackbacks (12)

  1. hide

    ども。
    すごいです。CSS3はいろいろできて本当に楽しいですよね。
    ぜひ参考にさせてもらって作ってみます。

  2. チャペの飼い主

               ___
              ./    \
              .| ^   ^ |
              | .>ノ(、_, )ヽ、.| <これはおもしろい!
             __! ! -=ニ=- ノ!___
        /´ ̄ ̄ .|\`ニニ´/    `ヽ
       {      .|__  ̄ ̄ヾ      }
       i;;’,,,  r—イ     /|,、_,,  ,’,;:’,i
       .l;’;',;,,  }  /;\     / ヽ / ,;,;;’,;l
       .|;;’,;,   } ./;;;,, \   / ;;;;;;ヽ ,,;;’,'i
        i;’,,   / /;;,’,';;  ノ–, ’,',;;::’,',゙i ,,’;';i
       i;,’;  /./,’,',’;;” /   \ ’,',’,;;,’i ,;’,i
      /  / i 、  /    ヽ ’,;::’、|  \
     ヽヽヽヾ丿  〈       ヽ”  {////
      ```` ト,   i        | 、 i´´´
           |’,',;;  }        ! ’,',;;i
          |,’,'、 /        ヽ’,',’,'|
           !;;’, /          !,’,;,;’|

  3. シロ

    >hideさん

    こにちはー :-D

    css3面白いですねー。新鮮な感じです :mrgreen: IEさえどうにかなれば普及は早いんでしょうけどね~。。もはや祈るだけです・・

  4. シロ

    >チャペ

    ズレてるぞ :mrgreen:

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services