<!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. iterm2 多频操作

    新开多个table窗口 右键 move session to split pane 选择窗口 command + 窗口号 灰色的窗口右键 toggle Broadcasting input

  2. vscode 编写Markdown文件

    vscode使用Markdown文档编写   首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默 ...

  3. sql中count(1)和count(*)有区别吗

    count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...

  4. transform-origin属性

    一.transform-origin的作用 transform-origin改变元素基点 (transform-origin是变形原点,原点就是元素绕着旋转或变形的点) 注意:该属性只有在设置了tra ...

  5. CSS3制作太极图以及用JS实现旋转太极图

     太极图可以理解为一个一半黑一半白的半圆,上面放置着两个圆形,一个黑色边框白色芯,一个白色边框黑色芯. 1.实现黑白各半的圆形. .box{ width:200px;height:200px; bor ...

  6. POJ 3764 The xor-longest Path ( 字典树求异或最值 && 异或自反性质 && 好题好思想)

    题意 : 给出一颗无向边构成的树,每一条边都有一个边权,叫你选出一条路,使得此路所有的边的异或值最大. 分析 : 暴力是不可能暴力的,这辈子不可能暴力,那么来冷静分析一下如何去做.假设现在答案的异或值 ...

  7. Redis高可用分布式

    阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器 ...

  8. [CF1082G]Petya and Graph：最小割

    分析 发这篇博客的目的就是要让你们知道博主到底有多菜. 类似于[NOI2006]最大获利.(明明就是一模一样好吧!) 不知道怎么了,半秒就想到用网络流,却没想出怎么建图. 连这么简单的题都没做出来,我 ...

  9. string matching

    string matching exkmp #include<bits/stdc++.h> using namespace std; ; int Nex[maxn],extend[maxn ...

  10. Dancing Stars on Me

    Dancing Stars on Me Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...