<!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. Azure IoT 技术研究系列1

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是我们物联网技术的最大应用,车联网.物联网. 互联网三网合一.作为Azure重要的Partner和 ...

  2. 常见BUG

    1.没有配置Tomcat服务,由于 <exclusions> <exclusion> <groupId>org.springframework.boot</g ...

  3. 2018微信小程序开发遇到的坑

    第一个坑:wx.showModal(OBJECT) wx.showModal在安卓手机里,如果点击遮罩的话会关闭弹窗,不会有任何回调.而苹果的情况下则是点击遮罩不会有任何反应. 这样会有什么问题呢? ...

  4. 并行操作多个序列map

    >>> def add1(a): return a + 1 >>> def add2(a,b): return a + b >>> def add ...

  5. PHP入门培训教程　一个漂亮的PHP验证码

    如何写一个漂亮的PHP验证码?兄弟连PHP培训 小编分享一段代码给大家: <?php class Imagecode{ private $width ; private $height; pri ...

  6. #431 Div2 Problem B Tell Your World (鸽巢原理 && 思维)

    链接 : http://codeforces.com/contest/849/problem/B 题意 : 给出 n 个在直角坐标系上的点,每个点的横坐标的值对应给出的顺序序数,比如 1 2 4 3 ...

  7. Oulipo【Hash】

    Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 45515   Accepted: 18181 Descript ...

  8. monit-日志监控工具

    前段时间,CTO下达了一个brief,需要搭建monit日志监控应用,匹配日志中的异常信息,自动发送邮件/微信告警.具体的要求如下: 1.监控***项目的各个应用,nginx的日志,匹配到错误时发送告 ...

  9. 基于自定义的动态数组实现一个栈（Java语言）

    关于动态数组,参见我的上一篇关于动态数组的博文https://www.cnblogs.com/inu6/p/11717129.html 1.什么是栈? (1)只能从一端添加元素,也只能从一端取出元素, ...

  10. Laravel5.5执行 npm run dev时报错，提示cross-env找不到（not found）的解决办法

    Laravel 5.4 Mix & Laravel5.5执行 npm run dev时报错,提示cross-env找不到(not found)的解决办法   首先进入package.json文 ...