Css3 Transition

22545 ワード

概要


要素をtransition設定することで、cssの属性値を一定の時間区間でスムーズに遷移させることができます.この効果は、マウスでクリックしたり、フォーカスを取得したり、クリックされたり、要素の変更をトリガーしたりして、アニメーション効果でCSSのプロパティ値を円滑に変更することができます.

サポートされているブラウザ


現在アプリケーションcacheをサポートしているブラウザは次のとおりです.
  • n  IE 10+
  • n  Firefox 8+
  • n  Chome 17+
  • n  Safari 5+
  • n  Opera1 11.6+
  • n  Android browser 2.1+
  • n  Ios safari 3.2+

  •     

    構文


    標準表記
    transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
     
    書き方:
  • n webkitカーネル:-webkit-transition
  • n Mozillaカーネル:-moz-transition
  • n Operaカーネル:-o-transition
  • n  Ms:  -ms-transition

  •  
     
    ツールバーの
    説明
    transition-property
    変換を実行するプロパティ
      transition-duration  
    変換の継続時間
      transition-timing-function  
    へんかんそくどへんか
      transition-delay  
    へんかんちえんじかん

     


    transition-timing-function


    transition-timing-function
    説明
    ベッセル曲線
    Ease
    だんだん遅くなる
    (0.25, 0.1, 0.25, 1.0)
    linear
    きんそく
    (0.0, 0.0, 1.0, 1.0).
    ease-in
    スピードを上げる
    (0.42, 0, 1.0, 1.0).
    ease-out
    げんそく
    (0, 0, 0.58, 1.0)
    ease-in-out
    加速後減速
    (0.42, 0, 0.58, 1.0)
    cubic-bezier
    ツールバーの
    ツールバーの

     


         


    サブプロパティはtransitionに書くことも、backgroundとbackground-colorの関係のように単独で書くこともできます.

    Demo

    <!DOCTYPE HTML>
    
    <html lang="en-US">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <style type="text/css">
    
        .timings-demo { border: 1px solid #ccc; padding: 10px; width: 800px; margin-bottom: 10px;}  
    
        .demo-box {
    
            width: 300px; 
    
            height: 50px; 
    
            margin-bottom: 5px;
    
            text-align: center; 
    
            line-height: 50px; 
    
            text-align: center; 
    
            color: #fff; 
    
            background: #999; 
    
            -webkit-border-radius: 5px; 
    
            -webkit-box-shadow:  0 0 5px rgba(102, 153, 0,0.5); 
    
        }
    
        #ease {-webkit-transition: all 5s ease 0.3s;}  
    
        #ease-in { -webkit-transition: all 3s ease-in 0.5s;}  
    
        #ease-out { -webkit-transition: all 5s ease-out 0s;} 
    
        #ease-in-out {-webkit-transition: all 1s ease-in-out 2s;}  
    
        #linear {-webkit-transition: all 6s linear 0s;}  
    
        #cubic-bezier {-webkit-transition: all 4s cubic-bezier 1s;}
    
        .timings-demo.timings-demo-hover .demo-box, .timings-demo:hover .demo-box {
    
            margin-left:400px; 
    
        }
    
        .test{
    
            width:300px;
    
            height:40px;
    
            line-height: 40px;
    
            color: #fff;
    
            background: #999;
    
            text-align: center;
    
            border-radius: 25px;
    
            -webkit-border-radius:5px;
    
            -webkit-transition:all 1s ease 0s;
    
            margin: 10px;
    
        }
    
    
    
        #change-color:hover{
    
            background: #000;
    
            color:red;
    
        }
    
    
    
        #change-scale:hover{
    
            -webkit-transform:scale(1.2);
    
    
    
        }
    
    
    
        #change-rotate:hover{
    
            -webkit-transform:rotate(360deg);
    
        }
    
    
    
        #change-skew:hover{
    
            -webkit-transform:skew(20deg);
    
        }
    
    </style>
    
    </head>
    
    <body>
    
    transition     
    
        <div class="timings-demo"> 
    
            <div id="ease" class="demo-box">all 5s ease 0.3s</div> 
    
            <div id="ease-in" class="demo-box">all 3s ease-in 0.5s</div> 
    
            <div id="ease-out" class="demo-box">all 5s ease-out 0s</div> 
    
            <div id="ease-in-out" class="demo-box">all 1s ease-in-out 2s</div> 
    
            <div id="linear" class="demo-box">all 6s linear 0s</div> 
    
            <div id="cubic-bezier" class="demo-box">all 4s cubic-bezier 1s</div> 
    
        </div>
    
    
    
    
    
    
    
            
    
        <div class="timings-demo">
    
            <div class="test" id="change-color">background: #000;color:red;</div>
    
            <div class="test" id="change-scale">-webkit-transform:scale(1.2)</div>
    
            <div class="test" id="change-rotate">-webkit-transform:rotate(360deg)</div>
    
            <div class="test" id="change-skew">-webkit-transform:skew(20deg)</div>
    
        </div>
    
    
    
    </body>
    
    </html>