0921自我总结

css3如何解决动画的播放、暂停和重新开始

一.解决的本质思路

播放的解决思路

先定义好动画效果通过类名的增加达到样式的出现

暂停的解决思路

我们播放动画时,如要暂停动画,就要用到animation-play-state这个属性。animation-play-state属性有两个值:

paused: 暂停动画;
running: 继续播放动画;

当然去掉animation-play-state,也可以继续播放动画。

重新开始解决思路

播放与重新开始的解决办法

对于元素取多个类名,通过类名的删除,替换

注意点:这里不能删除和添加类名为同一个,而且动画要同一效果,不同动画名称.不然动画效果无法重置

二.演示代码

<div id="box" class="box"></div>
<p id="text"></p>
<div class="control">
<button id="play" value="播放">播放</button>
<button id="pause" value="暂停">暂停</button>
<button id="restart" value="重新开始">重新开始</button>
</div> <style>
@keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: 400px;
}
100% {
margin-left: 0px;
}
}
@keyframes mymove1 {
0% {
margin-left: 0px;
}
50% {
margin-left: 400px;
}
100% {
margin-left: 0px;
}
}
.box {
margin: 50px 0;
width: 100px;
height: 100px;
background-color: #5578a2;
}
.play {
animation: mymove 5s infinite ease;
}
.restart {
animation: mymove1 5s infinite ease;
}
.pause {
animation-play-state: paused;
}
</style> <script>
var play = document.getElementById('play'),
pause = document.getElementById('pause'),
restart = document.getElementById('restart'),
text = document.getElementById('text'),
box = document.getElementById('box');
pause.addEventListener('click', function() {
if (box.classList.contains('play')) {
box.className = 'pause play box';
} else {
box.className = 'pause restart box';
}
text.innerHTML = this.value;
});
play.addEventListener('click', function() {
if (box.classList.contains('play')) {
box.className = 'play box';
} else {
box.className = 'restart box';
}
text.innerHTML = this.value;
});
restart.addEventListener('click', function() {
if (box.classList.contains('play')) {
box.className = 'restart box';
} else {
box.className = 'play box';
}
text.innerHTML = this.value;
});
</script>

css3动画如何解决动画的播放、暂停和重新开始的更多相关文章

  1. CSS3属性animation-play-state控制动画运行或暂停的技巧

    animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...

  2. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  3. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  4. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  5. CSS3动画与JS动画的优缺点?

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

  6. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  7. css3动画与js动画的区别

    css与 js动画 优缺点比较   我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...

  8. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  9. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

随机推荐

  1. LeetCode刷题总结-字符串篇

    本文梳理对LeetCode上有关字符串习题的知识点,并给出对应的刷题建议.本文建议刷题的总数为32题.具体知识点如下图: 1.回文问题 题号:5. 最长回文子串,难度中等 题号:214. 最短回文串, ...

  2. C#线程学习笔记五:线程同步--事件构造

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Event_Constructor.html,记录一下学习过程以备后续查用. 前面讲的线 ...

  3. MyBatis进阶讲解+ssm集成

    1.sql映射器Mapper MyBatis基于动态代理机制,让我们无需再编写Dao的实现. 传统Dao接口,现在名称统一以Mapper结尾,还有我们映射器配置文件要和映射器在同一个包. 1.1使用映 ...

  4. Node.js+Express+MongoDB数据库实现网页注册登入功能

    通过 Node.js + Express + MongoDB 实现网页注册账号 和 登入账号的功能 项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.h ...

  5. sql server无法连接本地服务器

    当连接sql server本地服务器 报一下错误: 标题: 连接到服务器 ------------------------------ 无法连接到 localhost. ---..... 打开wind ...

  6. centos6.5安装supervisor

    centos6.5安装supervisor,有很多种方法,但是有很多坑,为了以后不重复踩坑,这里记录一下. 一.如果用yum install supervisor, 默认安装的是2.1.9版本,2.x ...

  7. 记一个AbstractMethodError

    如下,引入FastJsonHttpMessageConverter 之后,导致了新的错误: @Override public void configureMessageConverters( List ...

  8. Ajax简单应用之个人简历页面搭建

    1.搭建HTTP静态Web服务器. 代码实现: # 1.导入socket模块 import socket import threading # 创建服务器类 class HttpServerSocke ...

  9. 每天3分钟操作系统修炼秘籍(12):OOM和swap分区

    点我查看秘籍连载 OOM和swap分区 进程的虚拟内存空间是映射到整个物理内存空间的,所以在进程自身看来它拥有了整个物理内存,它也能使用整个物理内存,只需在使用的时候请求操作系统帮忙分配更多空间即可. ...

  10. English:Day-to-day 1104

    \ ------------------------------ editor by enomothem ------------------------------ It snowed throug ...