CSSでhoverしたときに色の変化をアニメーションにする方法

CSS3 Transitions Animations
このエントリーをはてなブックマークに追加
PR

CSSにはtransitionというものがあり
このtransitionを設定することで変化にアニメーションを加える事が出来ます

transitionの書き方

#test {
transition:A B C D;
}

 

ABCDのそれぞれに各値を設定していきます
transitionには4のプロパティがあります、それぞれの値は半角スペースを空けます

A = transition-prperty  アニメーションを適用するプロパティ名を指定
B = transition-duration  アニメーションの動作時間を指定
C = transition-timing-function アニメーションの動作の仕方
D = transition-delay  アニメーションが開始されるまでの待ち時間

それぞれデフォルト値があり、そのままの場合は端折ることが出来ます

transition-prperty  初期値:none
transition-duration  初期値:0
transition-timing-function 初期値:ease
transition-delay  初期値:0

 

transitionを使ってhoverした時に色を変化させる方法

#test {
color:red;
-webkit-transition: color 3s ease 0;
-moz-transition: color 3s ease 0;
-o-transition: color 3s ease 0;
transition: color 3s ease 0;
}

#test:hover {
color:blue;
}

 

DEMO 表示

 

アニメーションの変化の度合いには
easeの他に、linear ease-in eas-out ease-in-out があり
数値で指定することも出来ます cubic-bezier( 0,0,0,0)

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)