CSS3、transition プロパティでアニメーションさせる

CSS3、transition プロパティでアニメーションさせる

最近CSS3のアニメーションを勉強しています。復習を兼ねて transition プロパティの基本的な使い方をまとめました。

“transition”は時間的変化という事のようです。animation プロパティよりも簡易的なアニメーションという印象で、animation より単純な指定でよいのでとっかかりやすかったです。

現時点でtransitionはIEは全く対応しておらず、その他のブラウザでもベンダープレフィックスが必要です。

アニメーションさせたい要素に、tansitionの4つのプロパティを指定する事により動きを表現できます。プロパティはまとめて書く事もできます。ベンダープレフィックスが必要なので、まとめて書かないと長くなってしまいますね。tansitionの各プロパティの説明が以下になります。

1. transition-propety

アニメーションの対象とするcssのプロパティを指定する。サイズだけを対象とするならば、heightやwidth と記入する。allとして全てを対象とする事もできる。

使用例

transition-property : all ;
↓↓対象が複数ある場合はカンマで区切って指定。
transition-property : width,height ;

2. transition-duration

アニメーションにかかる時間を指定する。

使用例

transition-duration : 1s ;
↑ 1sで1秒かけてアニメーションするという意味。

3. transition-timing-function

アニメーションの動きの指定。
ease , linear , ease-in , ease-out , ease-in-out の値を入れる事ができる。

使用例とそれぞれの動きのデモ

ease
transition-timing-function: ease ;

linear
transition-timing-function: linear ;

ease-in
transition-timing-function: ease-in ;

ease-out
transition-timing-function: ease-out ;

ease-in-out
transition-timing-function: ease-in-out ;

4. transition-delay

何秒後にアニメーションを開始するかを指定。

使用例

transition-delay: 2s ;
↑ 2sで2秒後に開始。0を指定ですぐに開始。

まとめて書く場合の書き方

まとめて書く場合は下記の順番でなくてもよいが、秒を指定指定は最初に指定されたものが duration 、後に指定された、ものが delay となる。

transition :  transition-property transition-duration  transition-timing-function  transition-delay ;

↓↓まとめて書いた例
transition :  transition: all 1s linear 0s ;

サンプルデモ

■サンプルデモのHTML

<p>example</p>

■サンプルデモのCSS
アニメーションさせたいp要素に対して下のように、マウスオーバー時に横が長く縦が短くなるように指定し、transition でアニメーションの動きを指定します。

p{
    width:150px;
    height:50px;
    color:#fff;
    background-color:#ccc;
    text-align:center;
    line-height:50px;
    margin:20px ;

    -webkit-transition: all 1s ease 0s ;
    -moz-transition: all 1s ease 0s ;
    -o-transition: all 1s ease 0s ;
}
p:hover{
    width: 250px;
    height:20px;
    line-height:20px;    
}
​

その他のサンプルデモ

transformなどと組み合わせて使うとマウスオーバーで傾けたりもできます。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能