Share an example of monitoring css3 animation end event-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Share an example of monitoring css3 animation end event

零下一度

May 18, 2017 pm 02:29 PM

When CSS3 animation completes an animation, we want the animation to remain in the terminated state or some other event. How to do it?

We can listen to the webkitAnimationEnd event

// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

-webkit-animation animation has three events:

Start event: webkitAnimationStart
End event: webkitAnimationEnd
Repeat motion event: webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

Example:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{
    margin: 200px auto 0;
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: #000;
    -webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
    0%{
        -webkit-transform: scale(1) rotate(50deg);
    }
    30%{
        -webkit-transform: scale(2) rotate(100deg);
    }
    6%{
        -webkit-transform: scale(0.5) rotate(-100deg);
    }
    100%{
        -webkit-transform: scale(1) rotate(0);

    }}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {    this.className = "";
    alert("动画结束");
})</script></body></html>

The transition attribute transition of css3 also has an end when the animation ends Event: webkitTransitionEnd

Note: There is only one event for transition

[Related recommendations]

1. Detailed introduction to animation in CSS3- direction attribute

2. The 8 properties of CSS3 animation (Animation) that must be mastered

3. Use the animation attribute to achieve delay between loops Execution example tutorial

4. Detailed explanation of the two pause methods (transition, animation) in css3

The above is the detailed content of Share an example of monitoring css3 animation end event. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

监测iframe的滚动行为Feb 18, 2024 pm 08:40 PM

如何监听一个iframe的滚动，需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时，有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件，以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动，并提供具体的代码示例供参考。获取iframe元素首先，我们需要

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

css3怎么实现高度渐变效果Apr 28, 2022 pm 05:54 PM

实现方法：1、利用“元素{animation:名称时间}”语句给元素绑定动画，并设置动画所需的时间；2、利用“@keyframes 名称{100%{height:渐变高度值;}}”语句，设置高度改变的动画动作，实现渐变效果即可。

手机被植入软件监听怎么解除Sep 22, 2023 pm 02:54 PM

手机被植入软件监听通过重启手机、检查手机设置、删除应用程序、使用安全软件和联系手机制造商或应用开发者等步骤解除。详细介绍：1、重启手机，按住手机的电源键，直到出现启动画面，然后选择“重启”选项；2、检查手机设置，确保没有未授权的应用程序正在运行；3、删除应用程序，在应用商店中搜索和删除未授权的应用程序；4、使用安全软件，安全软件可以帮助您检测和阻止可能危险的应用程序等等。

oracle为什么找不到监听Aug 04, 2023 pm 03:09 PM

oracle找不到监听的原因：1、监听程序未启动，导致连接失败；2、监听程序配置错误，通过检查参数文件的配置，确保端口号和其他相关配置正确；3、防火墙设置问题，检查防火墙的配置，确保相关端口是开放的；4、主机名解析问题，检查主机名解析的配置，确保主机名解析正确；5、监听程序崩溃或者异常关闭，检查监听程序的日志文件；6、网络连接问题，因为网络故障，网络配置错误或者网络负载过重。

See all articles