Transition的用法

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;
 
 
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自blog.csdn.net/qq_16403183/article/details/54427199