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. Android进程命令查看

    •       进程 是指一个具有独立功能的程序在某个数据集上的一次动态运行过程,它是系统进行资源分配和调度的最小单元. •       一个进程能够拥有多个线程.每一个线程必须有一个父进程. •   ...

  2. 从n个元素中选择k个的所有组合（包含重复元素）

    LeetCode:Combinations这篇博客中给出了不包含重复元素求组合的5种解法.我们在这些解法的基础上修改以支持包含重复元素的情况.对于这种情况,首先肯定要对数组排序,以下不再强调 修改算法 ...

  3. MySQL 各级别事务的实现机制

    MySQL 各级别事务的实现机制在处理cnctp项目已合包裹状态同步的问题时,发现读包裹状态和对包裹状态的更新不在一个事务内,我提出是否会因为消息并发导致状态一致性问题.在和同事讨论的过程中,我们开始 ...

  4. CentOS yum安装redis(转)

    1.安装redis yum install redis 2.安装php-redis扩展 yum install php-redis 3.启动redis,并设定开机自动启动 service redis ...

  5. 2D空间中求线段与圆的交点

    出处: https://answers.unity.com/questions/366802/get-intersection-of-a-line-and-a-circle.html 测试脚本(返回值 ...

  6. idea debug info can be unavailable. Please close other application using ADB: Monitor, DDMS, Eclipse

    开发android debug时 报错 解决方法 Kill adb  关闭  设备监视器

  7. Numpy数组与PIL Image转换

    引用于这个博客

  8. oracle11g重新安装oem

    1.重新设置sys sysman DBSNMP密码 alter user dbsnmp identified by **: 2.select 'drop public synonym '|| syno ...

  9. [NM]打开NetworkManager和wpa_supplicant的DEBUG接口

    turn on the DEBUG log in /etc/NetworkManager/NetworkManager.conf and restart NetworkManager. [loggin ...

  10. android 自定义无限循环播放的viewPager。轮播ViewPager。实现循环播放 广告，主题内容，活动，新闻内容时。

    前言 实际项目需要一个 播放广告的控件,可能有多个广告图片.每个一段时间更换该图片.简单来说,就是一个 “循环播放图片”的控件. 间隔时间更换图片 一般来说,图片切换时需要有动画效果 需要支持手势,用 ...