パンくず
CSS3新要素
時間的変化
transition
概要
時間的変化をまとめて指定するtransitionについて説明します
プロパティ名
transition
※2012/03/28現在、ベンダープリフィックスが必要
内容
時間的変化をまとめて指定します
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transition</title> <style type="text/css"> div.container { position:absolute; } div.transition1 { position:relative; background-color:skyblue; width:100px; height:75px; top:0px; left:0px; transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0; -webkit-transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0, top 3s linear, left 3s linear; -o-transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0; -moz-transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0; -ms-transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0; } div.transition1:hover { position:relative; background-color:yellow; width:400px; height:125px; top:100px; left:100px; } </style> </head> <body> transition: background-color 3s linear 0 , width 3s linear 0 , height 3s linear 0, top 3s linear, left 3s linear; <div class="container"> <div class="transition1">テスト</div> </div> </body> </html>