transitionプロパティを使用したアニメーションサンプル

先日に引き続き、CSS3のtransition関連の話題を…
検索欄のアニメーションだけでなく、様々なアニメーションを使用してみたいと思いませんか？ 

IE等一部ブラウザが未対応のため、実装にはまだ時間がかかるかもしれませんが、CSS3を勉強するにあたって、実験的にtransitionプロパティを使用して、いろいろなアニメーションサンプルを作ってみました。

※IE等、お使いのブラウザによっては、動作しない場合があります。

Part.1

.part1 {
    width:500px;
    margin:auto;
    background:#665e53;
    color:#efece6;
    padding:30px;
    -webkit-transition:background-color 2s linear;
    -moz-transition:background-color 2s linear;
    transition:background-color 2s linear;
}
.part1:hover {
    background-color:#efece6;
    color:#665e53;
}

バックの色のみtransitionをかけ、文字はhover後すぐに色を変えてます。

Part.2 

.part2 {
    width:300px;
    margin:auto;
    background:#665e53;
    color:#efece6;
    padding:30px;
    -webkit-transition:background-color 2s linear, width 1s linear , height 1s linear ;
    -moz-transition:background-color 2s linear, width 1s linear , height 1s linear ;
    transition:background-color 2s linear, width 1s linear , height 1s linear ;
}
.part2:hover {
    background-color:#efece6;
    color:#665e53;
    width:500px;
    height:200px;
}

先程のバックの色を変えながら、幅、高さも変化させています。

Part.3

#part3 {
    background:url(透過した時の画像) center no-repeat;
}
.part3 {
    color:#efece6;
    width:500px;
    margin:auto;
    background:#665e53;
    padding:30px;
    -webkit-transition:all 5s ease-in-out;
    -moz-transition:all 5s ease-in-out;
    transition:all all ease-in-out;
}
.part3:hover {
    opacity:0;
    -moz-opacity:0;
    -webkit-opacity:0;
}

透過させて、一番下の画像が出てくるようにしています。

まとめ

まだ、この他にも様々なエフェクトや、アニメーションがありますので、随時サンプルができ次第、ご紹介していきたいと思います。

個人的には、時間が経つとグラデーションがかかるようにしたかったのですが、何度やっても上手くいきませんでした。
物理的に無理なのかも知れませんが、今後いろいろと調べていきたいと思います。

via:HTMLクイックリファレンス