css3动画监听以及暂停
为一个元素添加一个动画class之后你还在用settimeout来延迟下一个动作了,你out啦下面这些绝对是装逼的知识点。
1.animation动画监听
-webkit-animation动画其实有三个事件:
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 console.log("start"); }, false); dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 console.log("end"); }, false); dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件 console.log("end"); //第一遍动画完成输出end }, false);
2.transition动画监听
this动画只有webkitTransitionEnd这一个事件
dom.addEventListener("webkitTransitionEnd", function(){ console.log("end"); }, false);
ps以上都没有做兼容的处理
这样我们就可以用很少的settimeout来做连贯的动画效果了,但是同一个元素的多个动画效果可能需要嵌套,想了想如果同一个元素为啥不直接在一个animation里都完成呢,这个可能要具体情况具体分析了
3.animation动画停止
当你把动画设置无限的时候,用什么方法把他停止在当前画面呢
<style type="text/css"> .love { display: block; width: 100px; height: 100px; background: url(http://www.zhangxinxu.com/study/201512/web_heart_animation.png) 0 0 no-repeat; background-size: 2900%; animation: heart-burst steps(28) 0.8s infinite both; }//图片背景的动画 .stop { animation-play-state: paused; } @keyframes heart-burst { 0% { background-position: 0%; } 100% { background-position: 100%; } } </style> <i id="testImg" class="love"></i> <p><input type="button" id="testBtn" value="暂停"></p> <script type="text/javascript"> var image = document.getElementById("testImg"), button = document.getElementById("testBtn"); if (image.classList && image && button) { button.onclick = function() { if (this.value == '暂停') { image.classList.add('stop'); this.value = '播放'; } else { image.classList.remove('stop'); this.value = '暂停'; } }; } </script>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

纯CSS3怎么实现波浪效果?本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法,希望对大家有所帮助!

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

在css中,可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框,即给边框加上背景图片,只需要将背景图片指定为花边样式即可;语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

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

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

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。
