Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS3的animation事件接口

  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");
  };
  //绑定事件
  html.addEventListener("webkitAnimationIteration",iteration);
  html.addEventListener("animationiteration",iteration);
  html.addEventListener("webkitAnimationStart",start);
  html.addEventListener("animationstart",start);
  html.addEventListener("webkitAnimationEnd",end);
  html.addEventListener("animationend",end);
  //开始执行动画
  html.style.animation=
  html.style.WebkitAnimation=
  "test 1s linear 0s 3";
};
</script>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^