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. FPM打包工具使用

    author:headsen chen date: 2019-01-19  14:57:09 个人原创博客,转自请注明出处和作者,否则追究法律责任 1,安装依赖和语言包 yum -y install ...

  2. gcd 多线程结束通知

    另外,GCD还有一些高级用法,例如让后台2个线程并行执行,然后等2个线程都结束后,再汇总执行结果.这个可以用dispatch_group, dispatch_group_async 和 dispatc ...

  3. POJ-2184 Cow Exhibition(01背包变形)

    Cow Exhibition Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10949 Accepted: 4344 Descr ...

  4. Why should we typedef a struct so often in C? - Stack Overflow

    https://stackoverflow.com/questions/252780/why-should-we-typedef-a-struct-so-often-in-c As Greg Hewg ...

  5. Balanced Lineup---poj3264线段树基础

    题目链接 求对应区间最大值与最小值的差: #include<stdio.h> #include<string.h> #include<algorithm> #inc ...

  6. CCO2017 Vera and Trail Building 构造+图论

    正解:构造+图论 解题报告: 找了半天才找到的传送门! 先简要表达下题意 一个图上,如果存在(a,b)满足a<b且存在从a到b再回到a的路径,每条道路被经过至多一次,我们称(a,b)为完美点对试 ...

  7. CentOS VmwareTools安装

    1. 虚拟机菜单栏--虚拟机--安装VMware tools 2. CentOS系统中弹出的VMware tools窗口中--右击VMwaretools.tar.gz--Extract到桌面 3.打开 ...

  8. AppFog使用

    cd ‘你的应用目录’ af login(之后输入你的邮箱和密码) af update ‘你的应用名’ 相关文档:https://docs.appfog.com/getting-started/af- ...

  9. 【其他】csv文件打开是乱码,怎么办?

    csv文件打开是乱码,怎么办?管用的方法,一个就够 工作中,将python生成的中间结果文件写入CSV,经常这么干是不是?文件保存下来后用excel打开,出现了乱码情况,真心烦.为什么? CSV是用U ...

  10. BUG笔记:Firefox select选项右侧边框没了

    Firefox 的default select在某些情况下右侧边框会消失.截图如下: 这个目前为止没有看到有任何解决方案,HACK也没有...囧... 有高人知道吗?