<!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. LOJ 6060「2017 山东一轮集训 Day1 / SDWC2018 Day1」Set（线性基，贪心）

    LOJ 6060「2017 山东一轮集训 Day1 / SDWC2018 Day1」Set $ solution: $ 这一题的重点在于优先级问题,我们应该先保证总和最大,然后再保证某一个最小.于是我 ...

  2. node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

    前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人 ...

  3. 转 git 本地文件添加远程git

    好的博客膜拜一下 https://www.liaoxuefeng.com/wiki/896043488029600/898732864121440 现在的情景是,你已经在本地创建了一个Git仓库后,又 ...

  4. day04记

    useGeneratedKeys useGeneratedKeys这个只在insert语句中有效,正常情况下useGeneratedKeys默认为false 当useGeneratedKeys为tru ...

  5. SQL把a表字段数据存到b表字段 update,,insert

    update SYS_Navigation set SYS_Navigation.PARENT_XH = SYS_Power_menu.parent_id,SYS_Navigation.web_tit ...

  6. Ubuntu安装过程中的问题

    1.win10系统安装32bit ubuntu,使用VM安装ubuntu 的iso文件,刚启动不停按F2,进入BIOS,boot设置为 CD-ROM drive 2.安装界面都没有出现,电脑老是重启, ...

  7. <知识整理>2019清北学堂提高储备D5

    今天主讲图论. 前言:图的定义:图G是一个有序二元组(V,E),其中V称为顶集(Vertices Set),E称为边集(Edges set),E与V不相交.它们亦可写成V(G)和E(G). 一.图的存 ...

  8. 【转】解决ajax跨域问题的5种解决方案

    转自: https://blog.csdn.net/itcats_cn/article/details/82318092   什么是跨域问题?跨域问题来源于JavaScript的"同源策略& ...

  9. （23）C++/Python项目练习一

    逆转字符串——输入一个字符串,将其逆转并输出. Python: def rev(s): return (s[::-1]) s =input("请输入一个字符串:") a = rev ...

  10. （22）Python练习项目集

    文本操作 逆转字符串——输入一个字符串,将其逆转并输出. 拉丁猪文字游戏——这是一个英语语言游戏.基本规则是将一个英语单词的第一个辅音音素的字母移动到词尾并且加上后缀-ay(譬如“banana”会变成 ...