CSS3 transition属性

时间：2015-10-12 17:08:44 阅读：1449 评论：0 收藏：0 [点我收藏+]

标签：

Transition（过渡），设置过渡时间，（transition-duration）

<head>
    <title>无标题文档</title>
    <style>
        .box{width:100px;height:100px;background:red; transition:500ms;}
        .box:hover{ background:blue;width:200px;height:200px;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>

只设置某一个样式过渡，即要运动的样式，下面的例子设置了width过渡（all | width | height | ... | none):

<head>
    <title>无标题文档</title>
    <style>
        .box{width:100px;height:100px;background:red; transition:500ms width;}
        .box:hover{ background:blue;width:200px;height:200px;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>

设置运动形式：transition-timing-function (ease[默认值，逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线]（http://matthewlein.com/ceaser/）)

<head>
    <title>无标题文档</title>
    <style>
        .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);}
        .box:hover{width:500px;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>

同时设置多个样式的过渡时间，用逗号分隔开，如下

<head>
    <title>无标题文档</title>
    <style>
        .box{width:100px;height:100px;background:red; transition:1s width,2s height,3s background;}
        .box:hover{width:500px;height:300px;background:blue;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>

设置延迟时间，transition-delay，即多长时间后开始某个运动，下面的例子中在1s之后高度开始过渡

 1 <head>
 2     <title>无标题文档</title>
 3     <style>
 4         .box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
 5         .box:hover{width:500px;height:300px;background:blue;}
 6     </style>
 7 </head>
 8 <body>
 9     <div class="box"></div>
10 </body>

过渡结束时触发指定的执行函数，在过渡结束时，执行alert（“end”）

<head>
    <title>无标题文档</title>
    <style>
        .box{width:100px;height:100px;background:red; transition:1s width;}
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        var oBox=document.getElementById("box");
        oBox.onclick=function()
        {
        　　this.style.width=this.offsetWidth+100+"px";
        };
        addEnd(oBox,function(){
        　　alert("end");    
        });
        function addEnd(obj,fn)
        {
        　　obj.addEventListener(‘WebkitTransitionEnd‘,fn,false);
        　　obj.addEventListener(‘transitionend‘,fn,false);
        }
    </script>
</body>

过渡完成事件
- Webkit内核： obj.addEventListener(‘webkitTransitionEnd‘, function(){}, false);
- firefox内核：obj.addEventListener(‘transitionend‘, function(){}, false);

CSS3 transition属性

标签：

原文地址：http://www.cnblogs.com/donghualei/p/4872025.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行