定义和用法

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. RocketMQ 升级到主从切换(DLedger、多副本)实战

    目录 1.RocketMQ DLedger 多副本即主从切换核心配置参数详解 2.搭建主从同步环境 3.主从同步集群升级到DLedger 3.1 部署架构 3.2 升级步骤 3.3 验证消息发送与消息 ...

  2. 如何优雅规避NPE

    项目中尤其是在持久层,难免会有大量的针对集合,对象,字符串的操作,为了程序的健壮性,我们不得不进行判空,像下面箭头式编码吗? if(null!=person){ ... if(null!=addres ...

  3. python django-admin.py startproject xxx 错误:from django.core import management

    1. Python安装路径以及Python安装路径\Script文件夹,已经添加到PATH环境变量中. 2. 查看django 版本正常: import django print(django.__v ...

  4. linux指令大全(归类整理)

    一.文件目录指令 1 pwd指令 pwd 显示当前所在的目录 2 ls指令 ls [选项] [目录或文件] 查看文件信息 ls -a 查看所有文件和目录,包括隐藏的 ls -l 以列表的方式显示 ll ...

  5. Java后端高频面试题汇总

    Java后端面试题汇总 近来,分专题更新了Java后端面试题,此文章对这些文章做一个目录式的整理,方便查看 1.Java基础   https://www.cnblogs.com/autism-dong ...

  6. javaWeb核心技术第九篇之JSP

    JSP:全名是Java Server Pages,它是建立在Servlet规范之上的动态网页开发技术.在JSP文件中,HTML代码与Java代码共同存在,其中,HTML代码用来实现网页中静态内容的显示 ...

  7. ElementUI项目中怎样引用Jquery

    场景 使用ElementUI的快速开始的项目模板搭建Element项目后, 要在vue页面中使用jquery的语法. 这里直接使用$.ajax会提示$找不到. 注: 博客:https://blog.c ...

  8. [20191101]通过zsh计算sql语句的sql_id.txt

    [20191101]通过zsh计算sql语句的sql_id.txt 1.简单介绍以及测试使用zsh遇到的问题:--//前段时间写的,链接http://blog.itpub.net/267265/vie ...

  9. MySQL数据库:基本操作及增删改查语句

    基本语法&&操作语句 create(创建) alter(更新) drop(删除) 一次性删除一个表中所有的数据 包括日志 truncate table 表名; 选中或者使用该数据库 说 ...

  10. 如何使用 TRANSPORTABLE = ALWAYS 将PDB移回Non-CDB (Doc ID 2027352.1)

    How to Move a PDB Back to a Non-CDB Using TRANSPORTABLE=ALWAYS (Doc ID 2027352.1) APPLIES TO: Oracle ...