CSS3过渡Transition

2017-01-18 本文已影响46人越IT

一、过渡（Transition）

−允许css的属性值在一定的时间区间内平滑地过渡
（一个元素从一种表现形态到另一种表现形态。用CSS美化，CSS值发生变化。即一个元素，它的属性从一个值变化到另一个值。）

−CSS效率高，瞬间变化，速度快。在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

【兼容性】
IE10+、FireFox16+、Chrome26+、safari6.1+、Opera12.1+

二、CSS3 transition属性

1).transition-property属性

-检索或设置对象中的参与过渡的属性。

【语法】

transition-property:none|all|property;

【参数说明】
-none（没有属性改变）
-all（所有属性改变），默认值
-property（元素属性名）

【例如】
颜色：transition-property:color;
从绿色到红色

透明度：transition-property:opacity
从0%到100%

transform案例

transform.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform;
       -moz-transition: transform;
        -ms-transition: transform;
         -o-transition: transform;
            transition: transform;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform;
       -moz-transition: transform;
        -ms-transition: transform;
         -o-transition: transform;
            transition: transform;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【备注】如果不写transition-property属性，表示all所有属性支持过渡。

2).transition-duration属性

-检索或设置对象过渡的持续时间

【语法】

transiton-duration:time;

【参数说明】
-规定完成过渡效果需要花费的时间（以秒或毫秒计）
-默认值是0

3).transition-timing-function属性

-检索或设置对象中过渡的动画类型。

【语法】

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps(<integer>[, [ start | end ] ]?) |
cubic-bezier(<number>, <number>, <number>, <number>);

【备注】
一次只能使用一个属性值

【参数说明】

linear:线性过渡。等同于贝塞尔曲线（匀速运动）（0.0,0.0,1.0,1.0）
ease：平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,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）
step-start:等同于 steps(1,start)
step-end:等同于steps(1,end)
steps(<integer>[,[start|end]]?):接受两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
第二个参数：可选，默认值为end

【参数说明】
-cubic-bezier(<number>,<number>,<number>,<number>):
特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

duration、timing-function综合效果

运动过程持续duration2秒，timing-function-set-in-out效果

transform，duration,timing-ease-in-out.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-timing-function</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

4).transition-delay属性

-检索或设置对象延迟过渡的时间

【语法】

transition-delay:time;

【参数说明】
-指定秒或毫秒数之前要等待切换效果开始
-默认值为0

·##transition属性
-符合属性，检索或设置对象变幻时的过渡

【语法】

transition:property duration timing-function delay;

案例：加上delay，延迟一秒后开始

transform四大属性.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-delay</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【备注】区别“duration”与“delay”两个时间

duration是整个过程所用的时间，
delay是开始之前等待的时候，
虽然delay一般写在后面，但是执行时先执行。

三、transition简写

transition属性

-复合属性，检索或设置对象变换时的过渡

【语法】

transition:property duration timing-function delay;

例如前例的简写：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS3过渡Transition

一、过渡（Transition）

二、CSS3 transition属性

1).transition-property属性

transform案例

2).transition-duration属性

3).transition-timing-function属性

duration、timing-function综合效果

4).transition-delay属性

案例：加上delay，延迟一秒后开始

【备注】区别“duration”与“delay”两个时间

三、transition简写

transition属性

猜你喜欢

热点阅读