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来实现呢?答案就是 ...
随机推荐
- Qt平台下使用QJson解析和构建JSON字符串
前言 上一篇介绍了C语言写的JSON解析库cJSON的使用:使用cJSON库解析和构建JSON字符串 本篇文章介绍,Qt开发环境下QJson库的使用示例,JSON解析配合API接口,就可以实现一些有趣 ...
- Java题库——Chapter6 一维数组
1)What is the representation of the third element in an array called a? 1) _______ A)a(3) B) a(2) C) ...
- C#-Excel导入工资条群发邮箱
第一次写随笔,一名在实习的程序猿,做的一个小应用,需要的朋友可以参考参考, 使用WinForm实现了一个导入Excel,群发工资条的功能.功能已经实现,还不够完善,. 大致运用了OleDbConnec ...
- (转)Skyline timeseries异常判定算法
原文链接:https://jiroujuan.wordpress.com/2013/10/09/skyline-anomalous-detect-algorithms/ Skyline内部提供了9个预 ...
- 【Visio流程图】借助redis来实现数据即时刷新
[需求:]数据从竞品网站爬过来,经过分析处理之后,把结果通过网页实时反馈给业务人员. [应用:]2个应用: 一个是爬取数据的应用:不断从竞品网站爬数据,每次爬到的数据为一批.然后,对每一批爬到的数据进 ...
- js的委托事件----Vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python的exe反编译
目录 python的exe反编译 方法一.使用archive_viewer.py提取pyc 方法二.使用pyinstxtractor.py提取pyc python的exe反编译 驱动人生样本为pyth ...
- kmeans均值聚类算法实现
这个算法中文名为k均值聚类算法,首先我们在二维的特殊条件下讨论其实现的过程,方便大家理解. 第一步.随机生成质心 由于这是一个无监督学习的算法,因此我们首先在一个二维的坐标轴下随机给定一堆点,并随即给 ...
- OC-类似歌词字体颜色逐字变化的实现方法
预期实效果图如下: 如上图所示,文字的颜色会根据时间的移动,逐字变成绿色. 实现方法:(1)调用方法: 用 void UIRectFillUsingBlendMode(CGRect rect, CGB ...
- Xamarin Bindableproperty 可绑定属性
重要的事情说三遍: 本文基本是取自微软官方 Bindable Properties, 官方也提供了机翻的中文版本,笔者只是尝试用自己的理解描述一遍,便于记忆.如有不对之处,欢迎拍砖. 本文基本是取自微 ...