监听css3的animation动画和transition事件

最新推荐文章于 2024-05-11 15:22:40 发布
最新推荐文章于 2024-05-11 15:22:40 发布
阅读量1k 收藏
点赞数 1
分类专栏： javascript

webkit-animation动画有三个事件：
开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration


css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd
注意：transition 仅有这一个事件

var o = document.getElementById("div1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
    console.log("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
    console.log("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})
代码实例：

<!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">
#div1{
    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>
<div id="div1"></div>
<script type="text/javascript">
var o = document.getElementById("div1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
    alert("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
    alert("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
    this.className = "";
    alert("动画结束");
})
</script>
</body>
</html>

转载于：https://blog.csdn.net/weixin_34124939/article/details/87635905

liu__software
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
transition相关事件
AIROU_ao的博客
10-16 523
height;background;transition;;.(,);.(,);
CSS3 Animation文字动画特效.zip
07-11
这些动画特效的实现都基于HTML结构和CSS3的动画规则，通常会结合使用伪类（如:hover、:active）来触发特定的动画效果，或者通过JavaScript事件监听器来响应用户交互。 为了应用这些特效，你需要将对应的CSS类添加到...
css3 animation
xiaogeldx的博客
06-07 594
文章目录跳动音符beat_melody.htmlbeat_melody.cssanimation相关属性nth-childdisplay帧动画 跳动音符 beat_melody.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti...
CSS3之transform详解及示例（3d变形）
最新发布
Zbz00720的博客
05-11 769
主要还是考验大家对X,Y,Z三个轴的理解，能否在脑海中构思出大致的逻辑。
css3 animation动画
weixin_49868928的博客
10-20 158
css3animation动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{
CSS3——Animation 动画
weixin_42164004的博客
06-03 451
1、基本用法 Animation需要指定动画一个周期持续的时间，以及动画效果的名称 div { // 简写 -webkit-animation: 1s rainbow; animation: 1s rainbow; } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } 2、属性 2.1 animation-nam
CSS3动画 animation
qq_52301431的博客
04-01 2733
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 格式： animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动 animation: onemove 5s ease-in-out 2s 3 alternate; 1、基本使用 1.1、语法fro
css3 animation动画制作点击波特效.zip
11-16
在前端开发领域，CSS3（层叠样式表第三版）为网页设计师提供了强大的动画功能，使得动态效果的创建变得更为简单。本项目“css3 animation动画制作点击波特效.zip”显然是一个关于如何利用CSS3的animation属性来创建...
CSS3动画效果回调处理详解
12-13
CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。 1、transition 对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用： 复制...
CSS3动画下载按钮特效
07-28
【CSS3动画下载按钮特效】是一种利用现代网页技术，特别是CSS3特性，为网站的下载按钮增添互动性和视觉吸引力的设计手法。此特效结合了jQuery库的便利性与CSS3的强大功能，创造出一种用户点击按钮时的动态效果，提高...
CSS3分享图标按钮过渡动画特效
07-28
本特效主要利用CSS3的强大功能，特别是其过渡（transition）和动画（animation）属性，为社会分享图标添加了独特的视觉表现。 首先，我们来探讨CSS3的过渡（Transition）属性。过渡效果允许元素在不同状态之间平滑...
CSS3-animation动画
String111111Name的博客
12-15 276
CSS3-animation动画
css动画animation详细解读
宋坚强大大~~
10-22 4604
以一个小球为例 向右匀速运动200px 然后再移动回来，然后再移动到200px处 停在那里 效果如下 div{ width:40px; height:40px; border-radius:50%; background:#0ff; animation:move 2s linear 3 alternate both; } @keyframes ...
CSS3动画（animation）
Bohn的博客
08-26 488
  1.什么是动画      使元素从一种样式逐渐变为另一种样式      即将多个过渡效果放下一起      动画是通过"关键帧"，来控制动画的每一步      关键帧：        1.定义动画执行的时间点        2.在该时间点上的样式是什么  2.动画的使用步骤     1.声明动画       为动画起名       定义关键帧     2.为元素调用动画       指定元素调...
css3 中transition监听事件
starwmx520的博客
01-18 4819
开始动画监听内可以触发其他的动画和业务事件 结束监听最有用，如当动画执行完后需要隐藏none这个标签 $(function(){ //transitoin 只支持transitoinend事件  $(".box1").on('click',function(){ $(this).toggleClass('current') }).on('transitionend',funct
css3：animation 动画详解（属性 + 案例）
知之为知之，不知为不知
05-05 1114
部分css3的动画效果是在合成线程上实现的，不需要主线程介入，所以省去了重排和重绘的过程，这就大大提升了渲染效率。
css3动画animation属性大全
梦之滇丶誓言
01-14 2913
animation: name duration timing-function delay iteration-count direction fill-mode play-state; 例：animation: myanimation 2s linear 1s infinite forwards; animation 属性是一个简写属性，用于设置动画属性： animation-nam...
CSS3 animation动画使用方法
(ง •_•)ง
06-22 163
.demo.on { animation-name: rotateInDownLeft;/*所需运行的动画名称*/ animation-duration: 5s;/*在5秒内完成动画*/ animation-delay: 3s;/*等待3秒开始动画*/ animation-iteration-count: 1;/*动画运行次数，最后停止，数字或infinite（无限次），*/ 下面尚未测试 /*animation-direction: alternate;轮流反向播放动画*/ /*anima
CSS3 animation 动画用法介绍
保持清醒
12-30 7814
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
CSS3动画加速：animations, transitions与transform结合JavaScript
通过监听DOM事件或手动触发，我们可以动态修改CSS属性来创建自定义动画。例如，使用JavaScript可以精确控制动画何时开始、何时结束，或者在动画过程中响应用户交互。 ```javascript document.getElementById('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值