css animation & animationend event & onanimationend

css animation & animationend event & onanimationend

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

https://developer.mozilla.org/en-US/docs/Web/API/Document/animationend_event

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {

  console.log('Animation ended');

});

const animated = document.querySelector('.animated');

animated.onanimationend = () => {

  console.log('Animation ended');

};

animationstart event & onanimationstart

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

const animated = document.querySelector('.animated');

animated.addEventListener('animationstart', () => {

  console.log('Animation started');

});

const animated = document.querySelector('.animated');

animated.onanimationstart = () => {

  console.log('Animation started');

};

See the Pen Live example by xgqfrms
(@xgqfrms) on CodePen.

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---

css animation & animationend event & onanimationend的更多相关文章

1. CSS魔法堂：更丰富的前端动效by CSS Animation

   前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

2. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

   目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

3. CSS Animation triggers text rendering change in Safari

   薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...

4. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

   *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

5. [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

   We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...

6. 利用 CSS animation 和 CSS sprite 制作动画

   CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

7. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

   前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

8. css animation @keyframes 动画

   需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

9. Apple CSS Animation All In One

   Apple CSS Animation All In One Apple Watch CSS Animation https://codepen.io/xgqfrms/pen/LYZaNMb See ...

随机推荐

1. https://www.exploit-db.com/docs/english/45906-cors-attacks.pdf

   https://www.exploit-db.com/docs/english/45906-cors-attacks.pdf What is CORS (cross-origin resource s ...

2. 墓碑机制与 iOS 应用程序的生命周期

   ① 应用程序的状态 iOS 应用程序一共有 5 种状态: Not running:应用未运行 Inactive:应用运行在 foreground 但没有接收事件 Active:应用运行在 foregr ...

3. 签名 sign key 纸质邮件 历史 RSA诞生历史

   API接口签名校验,如何安全保存appsecret? - 知乎  https://www.zhihu.com/question/40855191 要保证一般的客户端-服务器通信安全,可以使用3个密钥. ...

4. sentry 错误监控 报警

   错误监控 报警 Sentry | Error Tracking Software - JavaScript, Python, PHP, Ruby, more https://sentry.io/wel ...

5. RabbitMQ入门看这一篇就够了

   一文搞懂 RabbitMQ 的重要概念以及安装 一 RabbitMQ 介绍 这部分参考了 <RabbitMQ实战指南>这本书的第 1 章和第 2 章. 1.1 RabbitMQ 简介 Ra ...

6. Java异常封装（自定义错误信息和描述）

   一.checked异常和unchecked异常 checked异常: unchecked异常: 二.异常封装示例 2.1.添加一个枚举LuoErrorCode.java如下: 2.2.创建一个异常类B ...

7. Tomcat Context容器和Wrapper容器

   前言 Wrapper容器 前言 Context容器是一个Web项目的代表,主要管理Servlet实例,在Tomcat中Servlet实例是以Wrapper出现的,现在问题是如何才能通过Context容 ...

8. Java根据路径获取文件内容

   文章目录 一.思路 二.实现 给出一个资源路径.然后获取资源文件信息,常见三种方式:①网络地址 ②本地绝对路径 ③本地相对路径 一.思路 首先,给出一个string表示资源文件的标识,如何判断是网络中 ...

9. freemarket+itext+springboot将html静态页面渲染后导出为pdf文件

   1.maven依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf& ...

10. C++基本之 运算符重载

    =====>友元运算符#include <iostream> using namespace std; class Test { public: Test(int a = 0) { ...