Tbpgr Blog

元エンジニア 人事 tbpgr(てぃーびー) のブログ

CSS3新要素 | 時間的変化 | transition

パンくず

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>

完成画面のキャプチャ

フォーカス前

フォーカス後