动画可以暂停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 ...
随机推荐
- Cocos Creator更改底层,点击节点获取路径
Mac : 右键creator->显示包内容->Contents->Resources->engine->bin->cocos2d-js-for-preview.j ...
- C++ GUI Qt4学习笔记05
C++ GUI Qt4学习笔记05 qtc++正则表达式 QIntValidator -- 只让用户输入整数 QDoubleValidator -- 只让用户输入浮 ...
- Redis---系统学习
1.安装Redis Docker 2.查看Redis配置 进入Docker中的Redis容器: 进入启动命令目录:cd /usr/local/bin/ 启动redis客户端:./redis-cli c ...
- Arduino-一些函数
随机函数: int x=random(); //返回一个整型随机数 int x=random(10); //返回一个 [0,10) 整型随机数 int x=random(1,8); //返回一个 ...
- 花式赋值、列表、字典、解压缩、input()、格式化学习笔记
目录 花式赋值 列表(list) 字典(dict) 解压缩 input()与用户交互 格式化的三种方式 f_String格式化(important) %s.%d占位符 format 格式化(不常用) ...
- POJ 2104 K-th Number ( 求取区间 K 大值 || 主席树 || 离线线段树)
题意 : 给出一个含有 N 个数的序列,然后有 M 次问询,每次问询包含 ( L, R, K ) 要求你给出 L 到 R 这个区间的第 K 大是几 分析 : 求取区间 K 大值是个经典的问题,可以使用 ...
- 牛飞盘队Cow Frisbee Team
老唐最近迷上了飞盘,约翰想和他一起玩,于是打算从他家的N头奶牛中选出一支队伍. 每只奶牛的能力为整数,第i头奶牛的能力为R i .飞盘队的队员数量不能少于 .大于N. 一支队伍的总能力就是所有队员能力 ...
- HDU 6616 Divide the Stones
目录 题面 中文题意 比赛惨状 我的走不通的思路 \(m\)是偶数的情况 \(m\)是奇数的情况 题解的思路 另一些思路 源代码 题面 Time limit 3000 ms Memory limit ...
- cs231n assignment1 KNN
title: cs231n assignment1 KNN tags: - KNN - cs231n categories: - 机器学习 date: 2019年9月16日 17:03:13 利用KN ...
- Codeforces Round #603 (Div. 2)F. Economic Difficulties
F. Economic Difficulties 题目链接: https://codeforces.com/contest/1263/problem/F 题目大意: 两棵树,都有n个叶子节点,一棵树正 ...