transition是CSS3里面的一个属性,通常用在动画里,起到视觉上的过渡效果,不会让动画在网页里面显得僵硬。使用transition属性的时候要考虑浏览器的兼容性,兼容代码如下所示::
a
{
color: #c52d2f;
transition: color 3s,background-color 3s;
/*兼容性处理,IE9以下不支持*/
-webkit-transition: color 3s,background-color 3s;//谷歌、Safari浏览器
-moz-transition: color 3s,background-color 3s;//火狐浏览器
-o-transition: color 3s,background-color 3s;//欧朋浏览器
}
上述代码写的是文字颜色和背景颜色的变化。transition属性包括四个属性:
1)transition-property:设置过渡效果的 CSS 属性的名称,取值none|all|property
2)transition-duratiuon:完成过渡效果需要多少秒或毫秒,取值数字,为0则默认没有过渡效果
3)transition-timing-function:速度效果的速度曲线,linear匀速,ease慢快慢,ease-in慢速开始,ease-in-out慢速开始和结束
4)transition-delay:过渡效果要等多长时间以后开始,取值数字
在CSS文件中的语法结构为:
transition:property1 duration1 timing-func1 dalay1 , property2 duration2 timing-func2 dalay2;