パンくず
CSS3新要素
時間的変化
transition-property
概要
時間的変化の属性指定をするtransition-propertyについて説明します
プロパティ名
transition-property
※2012/03/28現在、ベンダープリフィックスが必要
設定値
項目名 | 設定値 |
---|---|
all | 全てのプロパティを対象とする |
none | 全てのプロパティを対象外とする |
プロパティ名 | 対象となるプロパティ名のリストをカンマ( , )区切りで指定 |
内容
時間的変化の属性指定を行います
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transition-property</title> <style type="text/css"> div.container { position:absolute; } div.transition-property1 { position:relative; background-color:skyblue; width:100px; height:75px; top:0px; left:0px;font-size:12px; transition-property: background-color, width, height,top,left; transition-duration:3s; transition-timing-function:linear; transition-delay:3s; -webkit-transition-property: background-color, width, height,top,left; -webkit-transition-duration:3s; -webkit-transition-timing-function:linear; -webkit-transition-delay:3s; -o-transition-property: background-color, width, height,top,left; -o-transition-duration:3s; -o-transition-timing-function:linear; -o-transition-delay:3s; -moz-transition-property: background-color, width, height,top,left; -moz-transition-duration:3s; -moz-transition-timing-function:linear; -moz-transition-delay:3s; -ms-transition-property: background-color, width, height,top,left; -ms-transition-duration:3s; -ms-transition-timing-function:linear; -ms-transition-delay:3s; } div.transition-property1:hover { position:relative; background-color:yellow; width:400px; height:125px; top:100px; left:100px;font-size:20px; } div.transition-property2 { position:relative; background-color:skyblue; width:100px; height:75px; top:200px; left:0px;font-size:12px; transition-property: all; transition-duration:3s; transition-timing-function:linear; transition-delay:3s; -webkit-transition-property: all; -webkit-transition-duration:3s; -webkit-transition-timing-function:linear; -webkit-transition-delay:3s; -o-transition-property: all; -o-transition-duration:3s; -o-transition-timing-function:linear; -o-transition-delay:3s; -moz-transition-property: all; -moz-transition-duration:3s; -moz-transition-timing-function:linear; -moz-transition-delay:3s; -ms-transition-property: all; -ms-transition-duration:3s; -ms-transition-timing-function:linear; -ms-transition-delay:3s; } div.transition-property2:hover { position:relative; background-color:yellow; width:400px; height:125px; top:300px; left:100px;font-size:20px; } </style> </head> <body> <div class="container"> <div class="transition-property1">テスト(font-size以外を指定)</div> <div class="transition-property2">テスト(all指定)</div> </div> </body> </html>