动画可以暂停animation-play-state
<!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的更多相关文章
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- iOS之核心动画（Core Animation）
Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
- CALayer动画的暂停,恢复,以及结束时候的回调
CALayer动画的暂停,恢复,以及结束时候的回调 源码如下: // // ViewController.m // AnimationLineView // // Created by YouXian ...
- Android（java）学习笔记263：Android下的属性动画（Property Animation）
1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...
- Android 属性动画（Property Animation） 全然解析 （下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...
- Android 属性动画（Property Animation） 完全解析 （下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...
- CALayer的上动画的暂停和恢复
CHENYILONG Blog CALayer上动画的暂停和恢复 #pragma mark 暂停CALayer的动画-(void)pauseLayer:(CALayer*)layer{CFTimeIn ...
随机推荐
- LOJ 6192 城市网络（树上倍增）
LOJ #6192. 「美团 CodeM 复赛」城市网络(链接) 一棵以 $ 1 $ 号节点为根的树,每个点有一个权值,有 $ q $ 个询问,每次从 $ x $ 点开始往某个祖先 $ y $ 走,初 ...
- 基于python3环境下搭建Robot Framework 自动化测试框架（一）
大家都知道,Robot Framework 是基于python2 环境 的一套自动化测试工具,据说python 2 到2020年不维护,现在用python 3 的环境搭建Robot Framework ...
- Linux内核设计与实现 总结笔记（第十四章）块I/O层
一.剖析一个块设备 块设备最小的可寻址单元是扇区. 扇区大小一般是2的整数倍,最常见的是512字节. 因为各种软件的用途不同,所以他们都会用到自己的最小逻辑可寻址单元----块.块只能基于文件系统,是 ...
- POJ 3061 Subsequence ( 二分 || 尺取法 )
题意 : 找出给定序列长度最小的子序列,子序列的和要求满足大于或者等于 S,如果存在则输出最小长度.否则输出 0(序列的元素都是大于 0 小于10000) 分析 : 有关子序列和的问题,都可以考虑采用 ...
- [算法]Min_25筛
前言 本篇文章中使用的字母\(p\),指\(\text{任意的} p \in \text{素数集合}\) 应用场景 若函数\(f(x)\)满足, \(f(x)\)是积性函数 \(f(p)\)可以使用多 ...
- GPSMap程序源代码
1. 界面 第一次打开时选择工程文件 MainActivity.java Tools.OpenDialog(new ICallback(){ public void OnClick(String pa ...
- 170906-MyBatis续
===============================================Dynamic SQL========================================== ...
- Oracle-存储过程实现更改用户密码
--调用存储过程实现更改DB用户密码 CREATE OR REPLACE PROCEDURE MODUSERPW(USER_NAME VARCHAR2,USER_PW VARCHAR2)ISSQLTX ...
- JPA Hibernate 等面向对象持久化框架难以解决的问题
1+N查询性能问题 单个更新实体对象,而不是使用单调语句 在Java端做了很重的数据处理,数据库端反而很少 多层次 fetch inner join 难以实现 关联映射难以自定义条件 级联操作难以掌控 ...
- UVALive 6859 Points （凸包）
Points 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/E Description http://7xjob4.com1.z ...