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 了。!

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>css的过渡</title>

    <style>

        #test{

            width: 1000px;

            margin: auto;

            text-align: center;

        }

        .demo{

            width: 100px;

            height: 100px;

            margin-top: 100px;

            text-align: center;

            line-height: 100px;

            display: inline-block;

            background: red;

            transition-property: width,height,transform;

            transition-duration: 1s;

            transition-timing-function: linear;

            /* Firefox 4 */

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

            -moz-transition-duration:1s;

            -moz-transition-timing-function:linear;

            /* Safari 和 Chrome */

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

            -webkit-transition-duration:1s;

            -webkit-transition-timing-function:linear,transform;

            /* Opera */

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

            -o-transition-duration:1s;

            -o-transition-timing-function:linear;

        }

        .demo:hover{

            width: 150px;

            height: 150px;

            line-height: 150px;

            background-color: red;

            transform:rotate(360deg);

            -moz-transform:rotate(360deg);

            -webkit-transform:rotate(360deg);

            -o-transform:rotate(360deg);

        }

    </style>

</head>

<body>

<div id="test">

    <div class="demo" style="background-color: yellowgreen">hello word!</div>

    <div class="demo" style="background-color: greenyellow">PHP语法</div>

    <div class="demo" style="background-color: dodgerblue">object</div>

    <div class="demo" style="background-color: chartreuse">c++</div>

    <div class="demo" style="background-color: palevioletred">java</div>

</div>

</body>

</html>