我们先来看一下transition过渡属性是什么？

 

　　transition属性是在表现时间经过的变化时使用，具体来说，你可以通过点击光标逐渐更改背景颜色等，还有其他的animation属性，但过渡属性用于进行相对简单的变化时使用。

 

　　下面我们就来具体看看transition属性的用法

 

　　我们先来看看transition属性的参数

 

　　-webkit-transition-property:变化的属性(background属性等);

 

　　-webkit-transition-duration:变化的秒数;

 

　　-webkit-transition-timing-function:变化的方法;

 

　　-webkit-transition-timing-function的有以下的值

 

　　default

 

　　linear:匀速

 

　　ease-in:逐渐加速

 

　　ease-out:逐渐减速

 

　　ease-in-out:逐渐加速和逐渐加速

 

　　cubic-bezier:自定义

 

　　也可以使用以下的缩写

 

　　-webkit-transition:变化的属性変化的秒数変化的方法;

 

　　我们来看具体的示例

 

　　代码如下

 

　　HTML代码

 

　　<divid="demo"></div>

 

　　<br>

 

　　<divid="demo2"></div>

 

　　CSS代码

 

　　

 

　　#demo{

 

　　height:100px;

 

　　width:200px;

 

　　background:rgb(255,100,100);

 

　　-webkit-transition-property:background;

 

　　-webkit-transition-duration:1s;

 

　　-webkit-transition-timing-function:linear;

 

　　}

 

　　#demo:hover{

 

　　background:rgb(100,255,100);

 

　　}

 

　　#demo2{

 

　　height:100px;

 

　　width:200px;

 

　　background:rgb(255,100,100);

 

　　-webkit-transition:background2sease-in-out;

 

　　}

 

　　#demo2:hover{

 

　　background:rgb(100,100,255);

 

　　}





本文转载自中文网