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来实现呢?答案就是 ...
随机推荐
- Ext.ux.UploadDialog上传大文件 HTTP 错误 413.1 - Request Entity Too Large Web 服务器拒绝为请求提供服务,因为该请求实体过大。Web 服务器无法为请求提供服务,因为它正尝试与客户证书进行协商,但请求实体过大。
问题描述 问题:HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(I ...
- Inherit from the Business Class Library Class 继承自Business类(EF)
In this lesson, you will learn how to implement business classes for your application using the Busi ...
- 介绍Dynamics 365 Customer Engagement中的备用键(alternate key)
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- 推荐四个phpstorm酷炫实用插件 让你写代码的时候不在孤单!
程序员写代码很孤独,每天只能和电脑屏幕交流,想要一个程序员鼓励师妹子,老板又不给配,如何让自己写代码的时候不再孤单呢?今天给大家分享的这四个插件,既实用又好玩,还能提高开发效率,这四个插件主要用到ph ...
- Andorid Studio 新建模拟器无法联网问题
1.查看自己本机的dns cmd -> ipconfing /all 2.修改模拟器的dns 跟PC本机一致. 开启模拟器 -> cmd -> adb root (需要root ...
- Oracle 两个逗号分割的字符串,获取交集、差集的sql实现过程解析
Oracle数据库的两个字段值为逗号分割的字符串,例如:字段A值为“1,2,3,5”,字段B为“2”.想获取两个字段的交集(相同值)2,获取两个字段的差集(差异值)1,3,5. 一.最终实现的sql语 ...
- JUC-9-线程按序交替
package com.wf.zhang.juc; import java.util.concurrent.locks.Condition; import java.util.concurrent.l ...
- jq Sortable的使用
本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...
- 还在担心网聊相亲的小姐姐,美女变恐龙!Python帮你"潜伏"侦查
最近,小编的一个朋友很是苦恼,他在Python交流的群里,认识了一个妹子,看头像感觉挺不错的,大家都喜欢摄影,蛮谈得来的!但是想要约见面却不敢,因为他看过<头号玩家>,深知躲在电脑背后 ...
- 《细说PHP》第四版 样章 第二章 PHP的应用与发展 2
2.2 PHP的应用 任何一种主流的编程语言,几乎都可以开发任何类型的软件.编程语言就是一种开发工具,而选择适合的工具去做适合的事儿,才能体现其应用价值.PHP最主要的应用,就是与数据库交互来开发W ...