MDN

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

回调函数返回 animationEvent属性

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <style media="screen">

    .a {

      width: 100px;

      height: 100px;

      background: red;

      animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;

    }

    @keyframes test {

      0% {

        transform: rotate(0deg);

      }

      50%, 60%{

        transform: rotate(120deg);

      }

      100% {

        transform: rotate(30deg);

      }

    }

  </style>

</head>

<body>

  <div class="a"></div>

  <script>

    var target = document.querySelector('.a');

    target.addEventListener('animationcancel', AnimationEvent=>{

      // CSS Animation属性意外中断时派发出来

      console.log( `animation cancel`);

    });

    target.addEventListener('animationstart', AnimationEvent=>{

      // CSS Animation开始

      console.log( `animation start`);

      console.log( AnimationEvent);

    });

    target.addEventListener("animationiteration", AnimationEvent=>{

        // 监听 iteration-cont

        console.log('animation iteration')

    });

    target.addEventListener('animationend', AnimationEvent=>{

      // CSS Animation结束

      // css 意外的中断不会触发 end

      console.log( `animation end`);

    });

  </script>

</body>

</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. ArrayList vs LinkedList 空间占用

    空间占用上,ArrayList完胜 看下两者的内存占用图   这三个图,横轴是list长度,纵轴是内存占用值.两条蓝线是LinkedList,两条红线是ArrayList,可以看到,LinkedLis ...

  2. 使用SpringBoot Admin监控SpringCloud微服务

    spring-boot admin的github地址:https://github.com/codecentric/spring-boot-admin 本文基于SpringCloud的环境和配置上增加 ...

  3. shell变量的截取总结

    #shell变量的截取 Shell中的${}.##和%% 假设定义了一个变量为: 代码如下: file=/dir1/dir2/dir3/my.file.txt //变量的删除 可以用${ }分别替换得 ...

  4. Backbone hello world

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  5. Mac Apache Tomcat WebServer 服务器配置

    1.配置准备工作 1)配置服务器准备工作 在 Finder 中创建一个 "workspace" 的文件夹,可直接创建在 /Users/QianChia(当前用户名)目录下. 下载相 ...

  6. Elasticsearch cat api的用法

    文章转自:https://blog.csdn.net/wangpei1949/article/details/82287444

  7. Vue（九）：样式绑定v-bind示例

    Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...

  8. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  9. argparse - 命令行选项与参数解析

    argparse模块作为optparse的一个替代被添加到Python2.7.argparse的实现支持一些不易于添加到optparse以及要求向后不兼容API变化的特性,因此以一个新模块添加到标准库 ...

  10. asp.net ashx一般处理程序实现async await异步操作

    目前项目存在页面展示大量图片,效率不高,考虑优化性能,改为ashx+异步下载的方式,废话不说直接贴code: using System; using System.Web; using System. ...