网站建设： 大概介绍CSS3的animation事件接口
发布人：桔子科技 发布时间：2015-05-07 07:14:13 分享到：
CSS3提供了animation来实现基本的动画效果，至于它的基础语法百度一下一大堆，我就不介绍了，不懂的自己百度去。animation在JavaScript中是提供相关事件的，但是这个事件接口的说明百度上的资料并不多，于是我就来不要脸地介绍一下。
其实目前基本的就是三个事件而已：开始、迭代、结束。开始和结束不用我废话了吧？谁都知道是什么意思。至于这个迭代，由于animation中有个iteration-count属性，它可以定义动画重复的次数，因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的，他们只会触发一次，而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。
这三个事件的标准名称是：
开始：animationstart
迭代：animationiteration
结束：animationend
但是目前版本的Chrome需要加上webkit前缀，而且还要注意大小写
开始：webkitAnimationStart
迭代：webkitAnimationIteration
结束：webkitAnimationEnd
最后是实例代码和截图
<style>
@-webkit-keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
@keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
</style>
<script>
onload=function(){
var html=document.documentElement;
//定义事件回调函数
var start=function(){
console.log(“start”);
},iteration=function(e){
console.log(e);
},end=function(){
console.log(“end”);
};
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司！
成都网站建设,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司, 成都网站制作公司，成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都微信网站建设，成都微商城网站建设，成都商城网站建设，成都网络公司。
下一篇：网站建设： 如何处理好 处理jQuery的动画队列上一篇：成都企业网站建设的重要作用
电话:4006-028-024 028-86633922
邮箱:Service@orangeapp.cn
成都市成华区崔家店路789号上城国际1-24-9号
