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. jmeter聚合报告导出时乱码的解决

    在使用jmeter性能测试时,聚合报告导出后使用excel打开时是乱码,查看相关文件后是编码的问题,解决方法如下: 1.现象: 用excel打开变成这种乱码无法看清 2.解决: 先使用记事本打开后,选 ...

  2. Unity3D笔记 英保通五 鼠标事件与GUI系统双击检测

    一.如何使用GUI事件来检测鼠标是否按下的事件: 获取当前事件:var e:Event=Event.current: using UnityEngine; using System.Collectio ...

  3. python的for else组合用法

    如下代码,输入评论,如果评论中含有敏感词则更换成*号,否则正常输入. li = ["老师", "你好", "333", "4444 ...

  4. 2018C语言第二次作业

    一.学习内容总结 1.指针是一种数据类型,同样占有空间,其存储的是内存地址: 2.定义指针变量要在变量名之前加“*”字符表示: 3.“&”是取地址运算符,“*”是间接运算符: (注:声名和使用 ...

  5. HDU-1394 Minimum Inversion Number(线段树求逆序数)

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...

  6. easyui-datagrid个人实例

    这个实例数据表格的功能,可以实现分页,增删改查功能 1.user.jsp <%@ page language="java" contentType="text/ht ...

  7. Codeforces Round #440 (Div. 2, based on Technocup 2018 Elimination Round 2)

    A. Search for Pretty Integers 题目链接:http://codeforces.com/contest/872/problem/A 题目意思:题目很简单,找到一个数,组成这个 ...

  8. Cache replacement policies 缓存实现算法

    Cache replacement policies - Wikipedia https://en.wikipedia.org/wiki/Cache_replacement_policies Cach ...

  9. Jmeter(十六)_beanshell实现字符串加密

    Jmeter内置的没有MD5加密方法,所以需要写一些java代码实现加密功能,以下是具体操作: 1:用eclipse建个工程(包名.类名.方法名自己起) package com.wjika.test; ...

  10. AWTK 全称为 Toolkit AnyWhere,是 ZLG 倾心打造的一套基于 C 语言开发的 GUI 框架(三平台+2个手机平台+嵌入式)

    最终目标: 支持开发嵌入式软件. 支持开发Linux应用程序. 支持开发MacOS应用程序. 支持开发Windows应用程序. 支持开发Android应用程序. 支持开发iOS应用程序. 支持开发2D ...