代码改变世界

Css3 Transition

2012-07-04 10:38  BlackBird  阅读(337)  评论(0)  编辑  收藏  举报

简介

通过对于元素进行transition设置允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

支持的浏览器

　　目前支持application 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>