css transition过渡

css过渡效果

transition设置过渡，transition的属性包括如下图：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

设置格式 

为了不同浏览器的效果，需要为其它几种添加相应的前缀标识：

              transition: width 2s;
     -moz-transition: width 2s;      /* Firefox 4 */

 -webkit-transition: width 2s;       /* Safari 和 Chrome */

         -o-transition: width 2s;       /* Opera */

如下：   

width属性会改变， 用时1秒，速度样式匀速，延时1秒。

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;   //过渡效果

transition-delay：1s;   //过渡延时

简写格式：transition:width 1s linear 1s;

也可以多属性样式改变，如下：

width,height,transform属性会改变，对应的样式用时1秒中，过渡效果为linear(匀速)，延时1秒

transition-property:width, height,transform;

transition-duration:1s,1s,1s,;

transition-timing-function:linear;   //过渡效果

transition-delay：1s;   //过渡延时

简写格式：transition:width 1s,height 1s,transform 1s;

以上之后，确定属性改变的时候，可以是在鼠标放在元素上之后：

元素：hover{

            width: 150px;

            height: 150px;

            transform:rotate(360deg);

}需要为其它几种添加相应的前缀标识：

这样就ok 了。！

   

   

   

   

hello word!

   

PHP语法

   

object

   

c++

   

java