MDN

监听css动画，开始，迭代次数，结束，中断

回调函数返回 animationEvent属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title></title>
  6.   <style media="screen">
  7.     .a {
  8.       width: 100px;
  9.       height: 100px;
  10.       background: red;
  11.       animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;
  12.     }
  14.     @keyframes test {
  15.       0% {
  16.         transform: rotate(0deg);
  17.       }
  18.       50%, 60%{
  19.         transform: rotate(120deg);
  20.       }
  21.       100% {
  22.         transform: rotate(30deg);
  23.       }
  24.     }
  25.   </style>
  26. </head>
  28. <body>
  29.   <div class="a"></div>
  30.   <script>
  31.     var target = document.querySelector('.a');
  32.     target.addEventListener('animationcancel', AnimationEvent=>{
  33.       // CSS Animation属性意外中断时派发出来
  34.       console.log( `animation cancel`);
  35.     });
  36.     target.addEventListener('animationstart', AnimationEvent=>{
  37.       // CSS Animation开始
  38.       console.log( `animation start`);
  39.       console.log( AnimationEvent);
  40.     });
  41.     target.addEventListener("animationiteration", AnimationEvent=>{
  42.         // 监听 iteration-cont
  43.         console.log('animation iteration')
  44.     });
  45.     target.addEventListener('animationend', AnimationEvent=>{
  46.       // CSS Animation结束
  47.       // css 意外的中断不会触发 end
  48.       console.log( `animation end`);
  49.     });
  50.   </script>
  51. </body>
  53. </html>

js监听指定元素的css动画属性的更多相关文章

  1. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  2. js监听dom元素内容变化

    $("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...

  3. waypoint+animate元素滚动监听触发插件实现页面动画效果

    最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...

  4. 知识点---js监听手机返回键，回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  7. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

随机推荐

  1. js 创建Date对象5种方式

    new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth ...

  2. Eureka的优势

    http://www.cnblogs.com/zgghb/p/6515062.html Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选 ...

  3. iOS 录制视频MOV格式转MP4

    使用UIImagePickerController系统控制器录制视频时,默认生成的格式是MOV,如果要转成MP4格式的,我们需要使用AVAssetExportSession; 支持转换的视频质量:低, ...

  4. nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) 解决办法

    遇到这个问题,是因为某个服务正在使用80端口; 解决步骤: 1.使用netstat命令查看80端口被哪个服务占用了 netstat -ant | grep 80 1 2.关闭80端口 /etc/ini ...

  5. CentOS6.9下安装python notebook

    操作系统:CentOS6.9_x64 python版本 : python2.7.13 添加低权限新用户: useradd mike su mike 使用virtualenv安装python2.7环境 ...

  6. 阿里云centos7.x 打开80端口(转)

    本文转自:https://blog.csdn.net/tengqingyong/article/details/82805053 一 :阿里云centos7.x用iptables打开80端口 1.安装 ...

  7. Google 发布的15个 Android 性能优化典范

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  8. Eclipse Unhandled event loop exception GC overhead limit exceeded

    修改Eclipse的配置文件:

  9. mvc4 强大的导出和不需要上传文件的批量导入EXCEL--SNF快速开发平台3.1

    数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件,实现文 ...

  10. SpringBoot打war包并部署到外部tomcat运行(jar工程改造为正war工程)

    如果你的SpringBoot工程是一个jar工程,而想把它改造成war工程,并打成war包放到外部的tomcat下运行,该怎么修改配置呢?这里以Maven工程为例进行介绍. (1)将pom.xml中的 ...