定义和用法

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 属性的更多相关文章

  1. CSS animation属性

    定义和用法 animation属性是下列属性的一个缩写属性: animation-name animation-duration animation-timing-function animation ...

  2. js监听指定元素的css动画属性

    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...

  3. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  4. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  7. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  8. animation属性

    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...

  9. CSS魔法堂:更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

随机推荐

  1. Ext.ux.UploadDialog上传大文件 HTTP 错误 413.1 - Request Entity Too Large Web 服务器拒绝为请求提供服务,因为该请求实体过大。Web 服务器无法为请求提供服务,因为它正尝试与客户证书进行协商,但请求实体过大。

    问题描述 问题:HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(I ...

  2. 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 ...

  3. 介绍Dynamics 365 Customer Engagement中的备用键(alternate key)

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  4. 推荐四个phpstorm酷炫实用插件 让你写代码的时候不在孤单!

    程序员写代码很孤独,每天只能和电脑屏幕交流,想要一个程序员鼓励师妹子,老板又不给配,如何让自己写代码的时候不再孤单呢?今天给大家分享的这四个插件,既实用又好玩,还能提高开发效率,这四个插件主要用到ph ...

  5. Andorid Studio 新建模拟器无法联网问题

    1.查看自己本机的dns cmd  -> ipconfing /all 2.修改模拟器的dns 跟PC本机一致.  开启模拟器 -> cmd -> adb root  (需要root ...

  6. Oracle 两个逗号分割的字符串,获取交集、差集的sql实现过程解析

    Oracle数据库的两个字段值为逗号分割的字符串,例如:字段A值为“1,2,3,5”,字段B为“2”.想获取两个字段的交集(相同值)2,获取两个字段的差集(差异值)1,3,5. 一.最终实现的sql语 ...

  7. JUC-9-线程按序交替

    package com.wf.zhang.juc; import java.util.concurrent.locks.Condition; import java.util.concurrent.l ...

  8. jq Sortable的使用

    本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...

  9. 还在担心网聊相亲的小姐姐,美女变恐龙!Python帮你"潜伏"侦查

    ​ 最近,小编的一个朋友很是苦恼,他在Python交流的群里,认识了一个妹子,看头像感觉挺不错的,大家都喜欢摄影,蛮谈得来的!但是想要约见面却不敢,因为他看过<头号玩家>,深知躲在电脑背后 ...

  10. 《细说PHP》第四版 样章 第二章 PHP的应用与发展 2

    2.2  PHP的应用 任何一种主流的编程语言,几乎都可以开发任何类型的软件.编程语言就是一种开发工具,而选择适合的工具去做适合的事儿,才能体现其应用价值.PHP最主要的应用,就是与数据库交互来开发W ...