定义和用法

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. form表单中的button自动刷新页面问题

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  2. 阿里面试实战题1----TreeSet,HashSet 区别

    TreeSet,HashSet 区别 TreeSet public class TreeSet<E> extends AbstractSet<E> implements Nav ...

  3. C#函数(构造函数)的重载

    using System; namespace test { class Program { static void Main(string[] args) { Cat cat = new Cat() ...

  4. 常用类-ExcelHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  5. Java学习 1.2——简述JVM,JRE,JDK的关系

    在上一节中,我们了解了JVM相关的知识,有兴趣的话可以先去看一下: Java学习 1.1——(JVM介绍)Java为什么能够跨平台? 这个篇主要分享的是JRE,JDK,JVM三者的区别,简言之: JD ...

  6. JAVA微信企业付款到零钱(十分钟搞定),附完整DEMO下载

    最近帮朋友做了一个简单的微分销系统,实现从企业付款到零钱分润的功能,简单记录一下微信企业付款到零钱的开发过程, 主要就是按规则封装好请求参数调用微信接口,涉及一些签名校验: A.接口流程 1. 获取用 ...

  7. MD5是个好东西 / MD5 is a nice guy

    md5是一种摘要生成算法,通过对消息生成唯一摘要,可校验消息是否被篡改. 众所周知,md5广泛用在http接口通讯的安全控制上,通过在签名原始串后加上商户通信秘钥,进行MD5运算,形成的摘要字符串即为 ...

  8. 从零开始的SpringBoot项目搭建

    前言 今天是我加入博客园的第一天今天刚好学习到SpringBoot,就顺便记录一下吧 一.创建项目 1.创建工程 ① 通过File > New > Project,新建工程,选择Sprin ...

  9. css权重问题

    权重决定了你css规则怎样被浏览器解析直到生效.“css权重关系到你的css规则是怎样显示的 权重记忆口诀.从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10 ...

  10. 转载 could not find a getter for ... in class ... 异常的原因解析

    可能原因如下: 1.真的没有写getter方法(发生几率:1%) 2.*.hmb.xml文件中的属性名和pojo不一致(*.hbm.xml和*.java没衔接好,不一致),字段属性没有正确配置,比如, ...