<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			.play-state {

			  width: 100px;

			  height: 100px;

			  margin: 40px;

			  text-align: center;

			  line-height: 94px;

			  border: 3px solid #e1efde;

			  border-radius: 50%;

			  animation: play-state 3s linear infinite;

			  cursor: pointer;

			}

			.play-state:hover {

			  animation-play-state: paused;

			}

			@keyframes play-state {

			  0% {

			    margin-left: 0;

			  }

			  100% {

			    margin-left: 200px;

			  }

			}

					</style>

	</head>

	<body>

		<div class="play-state">暂停</div>

	</body>

</html>

<script>

</script>

动画可以暂停animation-play-state的更多相关文章

  1. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. iOS之核心动画（Core Animation）

      Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core ...

  4. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  5. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  6. CALayer动画的暂停,恢复,以及结束时候的回调

    CALayer动画的暂停,恢复,以及结束时候的回调 源码如下: // // ViewController.m // AnimationLineView // // Created by YouXian ...

  7. Android（java）学习笔记263：Android下的属性动画（Property Animation）

    1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...

  8. Android 属性动画（Property Animation） 全然解析 （下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...

  9. Android 属性动画（Property Animation） 完全解析 （下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...

  10. CALayer的上动画的暂停和恢复

    CHENYILONG Blog CALayer上动画的暂停和恢复 #pragma mark 暂停CALayer的动画-(void)pauseLayer:(CALayer*)layer{CFTimeIn ...

随机推荐

  1. 多模字符串匹配算法-Aho–Corasick

    背景 在做实际工作中,最简单也最常用的一种自然语言处理方法就是关键词匹配,例如我们要对n条文本进行过滤,那本身是一个过滤词表的,通常进行过滤的代码如下 for (String document : d ...

  2. Vuex-全局状态管理【传递参数】

    src根目录 新建store文件夹,新建index.js 作为入口 在store文件夹中 新建modules文件夹 modules文件夹中,新建 a.js b.js 2个文件 a.js const s ...

  3. HRESULT: 0x80040228

    When run the arcgis engine codes in the console application, may come to the exception: HRESULT: 0x8 ...

  4. mysql FOREIGN KEY约束 语法

    mysql FOREIGN KEY约束 语法 作用:一个表中的 FOREIGN KEY 指向另一个表中的 PRIMARY KEY. DD马达 说明:FOREIGN KEY 约束用于预防破坏表之间连接的 ...

  5. 超大文件上传方案( Java )

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  6. 运输计划noip

    靠!这道题TM搞了我好几天,真是烦死人!!!早上打了一个倍增的TM只有95分QAQ... 然后一气之下开始不断卡常,各种玄学优化,可是就是T..TAT.. 可恶!晚上我就直接打了个tarjan,还好跑 ...

  7. 转载--C 的回归

    转载自http://blog.codingnow.com/2007/09/c_vs_cplusplus.html 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 goo ...

  8. JS onclick中this用法

    当在dom元素中使用onclick绑定事件的时候,可以使用this来指向该元素对象. 打印输出的内容为: 所以可以通过该this对象来获取子元素 //通过element获取该对象下的一个audio标签 ...

  9. 音频学习(一)-离线播放(AVAudioPlayer)

    最后更新:2017-05-23 方法 - (nullable instancetype)initWithContentsOfURL:(NSURL *)url error:(NSError **)out ...

  10. vue之router-link

    <router-link> 组件支持用户在具有路由功能的应用中(点击)导航.  1.to:表示目标路由的链接.当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个 ...