CSS3过渡属性详解，如何让简单代码轻松实现页面动画?

CSS3 transition属性允许CSS元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。接下来就一起去看看这个CSS3属性吧!

一、CSS3的transition属性

transition属性的作用就是指定当你的元素某些样式发生变化时，这些样式可以渐渐过渡到最终属性值。transition属性是一个简写的复合属性，其中包含了四个过渡属性。

1、transition 简写的复合属性，用于在一个属性中设置四个过渡属性。

2、transition-property 规定应用过渡的CSS属性的名称。

3、transition-duration 定义过渡效果花费的时间，默认是0。

4、transition-timing-function 规定过渡效果的时间曲线，默认是"ease"。

5、transition-delay 规定过渡效果何时开始，默认是0。

transition-property 用于产生过渡动画的单个或多个属性，或者过渡所有属性的关键字all。

transition-duration 渐变时间属性值为 “数值+s” ，代表多少时间完成过渡效果。

transition-timing-function 是可选属性值。

有如下可选值

1、linear线性过渡，ease(默认)平滑过渡，ease-in由慢到快、由快到慢，ease-in-out由慢到快再到慢，

2、step-start等同 steps(1, start)，step-end等同 steps(1, end)

3、steps()两个参数的步进函数。第一个参数为正整数，指定函数步数。第二个参数取值是start或end，指定每一步的值发生变化的时间点。第二个参数可选，默认值为end。

4、cubic-bezier(num, num, num, num)特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。

transition-delay可选属性值，设置延迟过渡(即设置多少时间后再开始过渡)，延迟的时间值为“数值+s”。该属性可以对多个不同的属性进行设置，用逗号隔开。

二，可用于过渡的属性

不是所有的样式都可以过渡，如说display:block不能过渡到display:inline-block。那么具体有哪些属性可以用于过渡呢？下面列举了部分可以用于过渡的属性

部分可用于过渡的属性示意图

三、兼容性

transition属性浏览器兼容性

transition属性浏览器兼容性

注：Internet Explorer 9 以及更早的版本不支持 transition 属性，且Chrome 25 以及更早的版本，需要前缀 -webkit-。

使用过渡属性而不是脚本的另一个原因是脚本方法改变多个元素样式可能会产生冲突，transition过渡属性就不需要考虑这个问题元素与元素之间互不影响。元素过渡需要知道样式具体的起始属性和末尾属性，如宽度从10px变化到100px。

四、transition属性的运用

示例一

控制单个属性（如width）过渡

改变单个属性示例

示例二

控制多个属性(如transform,background,background,height)过渡。

element{

-webkit-transition:-webkit-transform 5s,background 5s,width 5s,height 5s;

-moz-transition-property:width,height,-o-transform,background,;

-moz-transition-duration:5s,5s,5s,5s;

-o-transition-property:width,height,-o-transform,background;

-o-transition-duration:5s,5s,5s,5s;

transition-property:width,height,transform,background;

transition-duration:5s,5s,5s,5s;

}

感谢您阅读了这篇文章，希望会对您有所帮助。喜欢我就关注我吧，后面的文章内容会越来越精彩喔！