• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 位置: css3教程 -> css3动画过渡

    css3过度

    我们知道,transform(变形)、transition(过渡)和animation(动画)是CSS3动画的3大部分。

    在CSS3中,我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果

    CSS transform 属性所实现的元素变形,呈现的仅仅是一个“结果”,而CSS transition呈现的是一种过渡“过程”,通俗点说就是一种动画转换过程,如渐显、渐隐、动画快慢等。当鼠标移动上去的时候,都会有一定的过渡效果。

    语法:

    transition:属性 持续时间 过渡方法 延迟时间;

    其实transition属性是一个复合属性,主要包含4个子属性:

    • (1)transition-property:对元素的哪一个属性进行操作;
    • (2)transition-duration:过渡的持续时间;
    • (3)transition-timing-function:过渡使用的方法(函数);
    • (4)transition-delay:可选属性,指定过渡开始出现的延迟时间;

    举例:

     
    <!doctype html>
    <html>
    <head>
        <title>css3过渡</title>
        <style type="text/css">
            div
            {
                display:inline-block;
                padding:5px 10px;
                border-radius:5px;
                background-color:silver;
                cursor:pointer;
                transition:background-color 1s linear;
                -webkit-transition:background-color 1s linear;
                -moz-transition:background-color 1s linear;
                -o-transition:background-color 1s linear;
            }
            div:hover
            {
                background-color:#45b823;
            }
        </style>
    </head>
    <body>
        <div>css3教程</div>
    </body>
    </html>
    

    在浏览器预览效果如下:

    分析:

    上面代码通过transition属性指定:当鼠标指针移动到div元素上时,在1秒钟内让div元素的背景色从灰色平滑过渡到浅绿色。其中lineaer是过渡函数。

    上面,我们用一个例子让大家对CSS3过渡动画有一个感性的认知,在接下来的课程中,我们对transition-property 、transition-duration 、transition-timing-function和transition-delay这4个 transition子属性进行详细讲解。

     
    transition:background-color 1s linear;
    

    上面这句代码等价于:

     
    transition-property:background-color;
    transition-duration:1s ;
    transition-timing-function:linear;
    transition-delay:0;
    

    CSS3过渡往往可以与CSS3变形一起使用,可以动态地展示变形的一个过程,丰富的动画效果。