CSS animation 属性
定义和用法
animation属性是下列属性的一个缩写属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
注意:始终指定animation-duration属性,否则持续时间为0,永远不会播放。
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
| 属性 | Internet Explorer | Chrome | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| 属性名称 | IE | 谷歌 | 火狐 | Safari | Opera |
| animation | 10.0 | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属性值
| 属性值 | 描述 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 指定动画完成所需的秒数或毫秒数 |
| animation-timing-function | 指定动画的速度曲线 |
| animation-delay | 指定动画开始之前的延迟 |
| animation-iteration-count | 指定应播放动画的次数 |
| animation-direction | 指定动画是否应在交替循环中反向播放 |
| animation-fill-mode | 指定动画在执行之外应用的值 |
| animation-play-state | 指定动画是运行还是暂停 |
CSS animation 属性的更多相关文章
- CSS animation属性
定义和用法 animation属性是下列属性的一个缩写属性: animation-name animation-duration animation-timing-function animation ...
- js监听指定元素的css动画属性
MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- animation属性
文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...
- CSS魔法堂:更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
随机推荐
- mysql给字段取别名无法被jdbc解析的解决办法
项目上用的Spring JDBC,是通过ResultSetMetaData接口来调用具体数据库的JDBC实现类来获取数据库返回结果集的. 在项目开发中,发现在MySQL中使用的别名没有办法被正常解析, ...
- 多线程十 Timer
定时/计算在java中主要使用的是Timer对象,他的内部依然是采用多线程方式进行处理 它有四个构造方法 方法名 作用 Timer() 空参 Timer(String name) 指定名字 Timer ...
- INT 3 中断调试处理流程
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html INT 3 中断调试处理流程 一.调试器如何下INT 3 断点 1 ...
- Mybatis1
一.MyBatis介绍 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis ...
- Git - Git基本常用命令
Git基本常用命令 mkdir: XX (创建一个空目录 XX指目录名) pwd: 显示当前目录的路径. git init 把当前的目录变成可以管理 ...
- 数据显示按规格向datatable中增加空白记录
/// <summary> /// 按前台分页样式为datatable增加空行 /// </summary> /// <param name="gridPage ...
- 搭建SSM框架的配置文件
pom.xml所需要的基本依赖和插件: <dependency> <groupId>org.mybatis</groupId> ...
- 松软科技前端课堂:JavaScript 数值方法
Number 方法帮助您处理数值. Number 方法和属性 原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值 ...
- kali安装openvas
参考: https://blog.51cto.com/linhong/2134910?source=drh https://www.freebuf.com/sectool/133425.html ht ...
- 别不信!servlet获取到的参数值,也许完全出乎你的意料!
先贴出来简单得不能再简单的demo页面效果: 如下是spring mvc的Controller: @RequestMapping("mytest") @Controller pub ...