定义和用法

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. 织女星开发板RISC-V内核实现微秒级精确延时

    前言 收到VEGA织女星开发板也有一段时间了,好久没玩了,想驱动个OLED屏,但是首先要实现IIC协议,而实现IIC协议,最基本的就是需要一个精确的延时函数,所以研究了一下如何来写一个精确的延时函数. ...

  2. ETCD:词汇表

    原文地址:词汇表 本文档定义了etcd文档,命令行和源代码中使用的各种术语. Alarm 每当集群需要操作员干预以保持可靠性时,etcd服务器都会发出警报. Authentication 身份验证管理 ...

  3. [Vue warn]: Invalid prop: type check failed for prop "fullscreen"

    fullscreen属性是Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误: 解决办法:实际上并不 ...

  4. 启动jar包并生成日志的linux脚本

    启动脚本 nohup java -Xms300m -Xmx300m -jar $1 >log/$2 2>&1 & 使用方式 建立一个.sh结尾的脚本,里面放入此代码. 需要 ...

  5. Spring注解的使用和组件扫描

    非常重要] 组件扫描(Component-Scan) 通过配置组件扫描,可以使得spring自动扫描package,而不必在spring的配置文件中逐一声明各个<bean> 在配置组件扫描 ...

  6. flutter 下拉加载+下拉加载

    功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...

  7. 大话Git系列之初识版本控制系统(2)

    本次接着上次的来介绍版本控制系统,这个讲到的将是Git与Github,说一下什么是Git,什么是GitHub?他们之间的关系是什么? 1.Git 是代码管理的工具 2.GitHub 是基于Git实现的 ...

  8. Spring Boot 2 使用自定义配置

    在application.yml定义配置后,可以使用Environment来读取配置,也可以使用@Value注解让业务代码去读取配置.如果属性较多,可以定义属性映射对象. 开发环境:IntelliJ ...

  9. IntelliJ IDEA搭建Spring Boot 2 项目入门

    之前都是用Eclipse,今天试了下IntelliJ IDEA,搭建了一个Spring Boot 2的Hello world项目. 一.IntelliJ IDEA 下载安装 官网下载:https:// ...

  10. USB HOST与 USB OTG的区别及工作原理

    在SmartQ 7上面,同时存在USB HOST与 USB OTG两个接口,我想问一下,这两个接口有什么区别么?我怎么认为HOST属于是多余呢? 麻烦高手解答,感激不尽!!! 转自USB HOST与 ...