animation-play-state:

css:

.play-state{
-webkit-animation:f1 2s 0.5s infinite linear forwards alternate;
-moz-animation:f1 2s 0.5s infinite linear forwards alternate;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.play-state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}

html:

<div class="play-state">鼠标移过来我就停,移走就运动,好听话哦!</div>

animation-play-state的更多相关文章

  1. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  2. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

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

  3. 一款开源免费的WPF图表控件ModernuiCharts

    一款简洁好看的Chart控件  支持WPF.silverlight.Windows8  ,基本够用,主要是开源免费的.(商业控件ComponentOne for WPF要4w多呢) This proj ...

  4. 比较不错的几款开源的WPF Charts报表控件

    UWP Community Toolkit 1. ModernUIChart Code: http://modernuicharts.codeplex.com/ Available Charts Co ...

  5. Unity编辑器 - 编辑器控制特效播放

    编辑器控制特效播放 Unity的动画编辑器不能预览粒子系统的播放,为了方便预览特效,设想制作一个预览特效的工具,通常一个特效有三种组件: - Animation - Animator - Partic ...

  6. 完整学习使用CSS动画【翻译】

    注:原文有较大改动 使用keyframes, animation属性,例如timing,  delay, play state, animation-count, iteration count, d ...

  7. 纯 CSS 方式实现 CSS 动画的暂停与播放!

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

  8. 翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

    Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人 可能是网上关于 G ...

  9. React-native/React 公告滚动组件(原生代码)

    编写不易, 希望大家点赞 import React, {PureComponent} from 'react'; import {Animated, Easing, View} from 'react ...

  10. Taro框架---左滑动删除

    index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

随机推荐

  1. 公钥基础设施体系和EJBCA的一些概念

    最近一段时间的在公司做的事情是: 1. 为公司的一些线上系统启用https(使用nginx反向代理的方式来实现,之前的应用无需做改动) 2.为符合规则的用户颁发数字证书(自建CA来实现,目前的用途是给 ...

  2. Yet another way to manage your NHibernate ISessionFactory

    So here is my current UnitOfWork implementation.  This one makes use of the somewhat new current_ses ...

  3. vue--环境搭建(创建运行项目)

    如何搭建vue环境: 1.安装之前必须要安装 node.js 2.搭建Vue环境,安装vue的脚手架工具 npm install --global vue-cli / cnpm install --g ...

  4. HTML5是什么?如何鉴定HTML5产品?[转]

    转自:http://www.jscode.cn/web/v62484 Html 5开始大热标志性的事件是Apple 前CEO Steve Jobs 公开炮轰Flash,并指出Flash在移动终端的不利 ...

  5. Spring注解及作用

    一: spring mvc中的@PathVariable是用来获得请求url中的动态参数的 @PathVariable用于方法中的参数,表示方法参数绑定到地址URL的模板: 例 @Controller ...

  6. python中的字符串切片

    python中的字符串切片,似乎有点乱,例如: >>>pystr='Python' >>>pystr[2:5] 就会输出 'tho' 这该怎样理解呢?中括号[2:5 ...

  7. The third column indicates whether subclasses of the class declared outside this package have access to the member.;

    总结1.modifier 改性剂 修饰符 修饰语 调节器access modifier 访问修饰符 存取权限 存取修饰词 存取修饰字官网“can”Access level modifiers dete ...

  8. proxychains

    有时候需要连接某机器,但是直接连被屏蔽了,虽然可以用代理来搞定一些应用程序,但是很多程序不支持代理,或者只支持某些类型的代理,这时候就可以试一试 proxychains 这个软件了. 最近用各种脚本下 ...

  9. SQL语句常见视图操作部分试题(一)

    创建一个名称为EMPLOYEES_VU的视图,它基于EMPLOYEES表中的雇员号.雇员名和部门号.将雇员名的列标题改为EMPLOYEE. CREATE VIEW EMPLOYEES_VU AS SE ...

  10. 学习计划 nginx 中 mime.types 的作用

    nginx中http模块下默认配置加载了mime.type 于是想知道这是什么? -- 什么是mime.type? 首先,应该了解到,浏览器是如何处理内容的,在浏览器中显示的各种内容,MP4.png. ...