跟我学习css3之transition

浏览数：15 / 时间：2015年06月09日

HTML5和css3已经是将来的发展趋势，现在有很多移动端还有一些游戏公司已然使用它们开
发了比较成功的产品。我在2011年的时候也跟着技术潮流初浅的学习了html5+css3。毕竟那
时候我没有把学习的知识与实际工作结合起来。因此，这种没有实践的学习很容易忘记。在
去年年底的时候公司有个页面的浮层图标需要优化，就是鼠标划过能变大，划出复原。其实
要做这个功能很简单，也有很多的方法。但是，我后来就用了css3的transition属性。

简单的示例结构:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    

<title></title>
    <style type="text/css">
        #scrollTop { margin:0; _margin-bottom:30px; padding:0; 

height:77px; position:fixed; _position:absolute; right:2px; bottom:30px; 

_bottom:0; _top:expression(eval(document.documentElement.scrollTop

+document.documentElement.clientHeight-this.offsetHeight-(parseInt

(this.currentStyle.marginTop,10)||0)-(parseInt

(this.currentStyle.marginBottom,10)||0))); z-index:60000;}
        #scrollTop a {display:block; width:28px; height:77px; margin:0; 

padding:0; text-decoration:none; background:#FFF url

(http://s.hqbcdn.com/assets/v3/images/scrollTop_ico.png) no-repeat;}
        
    </style>
</head>
<body>
    <div style="display:none;" id="scrollTop"><a 

href="javascript:;">&nbsp;</a></div>
</body>
</html>

View Code

方法一:
给元素添加:hover伪类样式

#scrollTop a:hover {width:84px; background:#b4b9bd url

(http://s.hqbcdn.com/assets/v2/images/scroll_top.jpg) no-repeat 50% 50%; text-

decoration:none; opacity:0.8;}

这个方式功能是达到了，但是交互的效果有点生硬，大家都喜欢运动效果的交互。

方法二:
为了有运动的交互效果，我们可以使用一些js框架的运动效果
这里我就使用大家常使用的jquery+jquery-easing.1.3.js来实现

$(‘#scrollTop a‘).hover(function(){
        $(this).animate({width:‘84px‘}, 2000, ‘easeInOutQuad‘)
    }, 
    function(){
        $(this).animate({width:‘28px‘}, 2000, ‘easeInOutQuad‘)
    })

方法三:
使用css3的transition给#scrollTop a:hover多添加一条css，如下：

#scrollTop a:hover {transition:width .2s ease-out;}

这样是不是比方法二简单方便，当然这个方法是不是没有缺点，只要懂一点前端的就是知道
这个方法不适合IE10以下的浏览器。不过，也没有关系，这个方法是结合方法一的，所以在
IE以下的功能能实现只是没有交互的效果，谁叫他们使用IE是吧^_^!

以上说了那么多无关transition的话，只是为了下面来学习了解它

transition：支持从一个属性值平稳过渡到另一个属性值

语法：

transition: property duration timing-function delay;

property：规定设置过渡效果的 CSS 属性的名称。
duration：规定完成过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始。

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 

transition </title>
    <style type="text/css">
    div {
        width:100px;
        height:100px;
        background:red;
        transition: width 2s;
        -moz-transition: width 2s; /* Firefox 4 */
        -webkit-transition: width 2s; /* Safari 和 Chrome */
        -o-transition: width 2s; /* Opera */
    }
    div:hover {
        width:300px;
    }
    </style>
</head>
<body>
    <div>transition</div>
</body>
</html>

transition还能同时过渡几个属性值如下：

例1：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 

transition </title>
    <style type="text/css">
    div {
        width:100px;
        height:100px;
        background-color:red;
        color:#fff;
        transition: width 2s, height 2s, color 2s;
        -moz-transition: width 2s, height 2s, color 2s; /* Firefox 4 */
        -webkit-transition: width 2s, height 2s, color 2s; /* Safari 和 

Chrome */
        -o-transition: width 2s, height 2s, color 2s; /* Opera */
    }
    div:hover {
        width:300px;
        height:300px;
        color:yellow
    }
    </style>
</head>
<body>
    <div>transition</div>
</body>
</html>

View Code

例2：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 

transition </title>
    <style type="text/css">
    div {positionn:relative;}
    img {
        position:absolute;
        left:0;
        top:70px;
        -webkit-transform:rotate(0deg);
        -webkit-transition:left 1s linear, -webkit-transform 1s linear;
        -moz-transform:rotate(0deg);
        -moz-transition:left 1s linear, -moz-transform 1s linear;
        -o-transform:rotate(0deg);
        -o-transition:left 1s linear, -o-transform 1s linear;
    }
    div:hover img {
        left:30px;
        -webkit-transform:rotate(720deg);
        -moz-transform:rotate(720deg);
        -o-transform:rotate(720deg);
    }
    </style>
</head>
<body>
    <div><img 

src="http://im.okhqb.com/images/im_entrance_big.jpg" alt="" /></div>
</body>
</html>