css3 动画效果定义和绑定执行

首先要定义一个动画效果 keyframes 关键字

这里动画效果执行完毕后恢复本身的css样式有的动画效果移动到位置要保持就需要写好css 元素的位置

css里直接写 (这里是一般的也就是ie10 ie11)

@keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

谷歌等webkit

@-webkit-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

opera浏览器

@-o-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

火狐浏览器

@-moz-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

实例

  /*定义动画*/

    @keyframes piaoru{/*ie10 ie11*/

        from{color: #000;}

        to{color: red;}

    }

    @-webkit-keyframes piaoru{/*chrome safari*/

        from{color:#000;}

        to{color:red;}

    }

    @-o-keyframes piaoru{/*opare*/

        from{color:#000000;}

        to{color:red;}

    }

    @-moz-keyframes piaoru{

        from{color:#000;}

        to{color:red;}

    }

下面是执行动画

直接在元素上绑定animation

 /*绑定动画*/

    .abstract{

        /*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/

       animation: piaoru 15s;/*ie10 ie11*/

        -webkit-animation:piaoru 15s;/*webkit*/

        -moz-animation:piaoru 15s;

        -o-animation: piaoru 15s;

    }

　完整实例字体颜色变化动画效果

<style type="text/css">

 /*定义动画*/

    @keyframes piaoru{/*ie10 ie11*/

        from{color: #000;}

        to{color: red;}

    }

    @-webkit-keyframes piaoru{/*chrome safari*/

        from{color:#000;}

        to{color:red;}

    }

    @-o-keyframes piaoru{/*opare*/

        from{color:#000000;}

        to{color:red;}

    }

    @-moz-keyframes piaoru{

        from{color:#000;}

        to{color:red;}

    }

    /*绑定动画*/

    .abstract{

        /*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/

       animation: piaoru 15s;/*ie10 ie11*/

        -webkit-animation:piaoru 15s;/*webkit*/

        -moz-animation:piaoru 15s;

        -o-animation: piaoru 15s;

    }

</style>

 <h3 class="abstract">摘要</h3>

巴特西

css3 动画效果定义和绑定执行

最新文章

热门文章

巴特西

css3 动画效果 定义和绑定执行

最新文章

热门文章

css3 动画效果定义和绑定执行