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 | 指定动画是运行还是暂停 |
HTML颜色名称
所有浏览器支持的颜色名称，所有现代浏览器都支持以下140种颜色名称（单击颜色名称或十六进制值，以将颜色视为背景颜色以及不同的文本颜色）：
有关HTML颜色的完整概述，请访问我们的颜色教程。
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来实现呢?答案就是 ...
随机推荐
- Django 全局log process_exception中间件
class BaseResp: # 基础的返回值类 def __init__(self, code, msg, data): self.code = code self.msg = msg self. ...
- Android native进程间通信实例-binder篇之——解决实际问题inputreader内建类清楚缓存
我在实际开发中,遇到一个问题,在电容屏驱动中没有发送input_sync 给上层,导致电容屏有的数据缓存在inputreader 中,会导致系统一系列奇怪问题发生, 至于为什么驱动不发送input_s ...
- fiddler---Fiddler修改数据信息
在测试的过程中,可能我们会遇到需要修改一些数据查看请求返回内容是如何的,刚好Fiddler也可以满足我们的要求,Fiddler不仅可以抓包还可以修改包的内容 Fiddler修改数据原理 Fiddler ...
- C学习笔记（4）--- 指针的应用（第一部分）
1.指针(pointer)概念: 指针是一个变量,其值为另一个变量的地址,即,内存位置的直接地址.就像其他变量或常量一样,您必须在使用指针存储其他变量地址之前,对其进行声明.指针变量声明的一般形式为: ...
- c# 第39节 抽象类、抽象方法
本节内容: 1:抽象类的说明 2:抽象类的实例 1:抽象类的说明 抽象类定义:方法前有abstract就称为抽象类.抽象方法,抽象方法不提供任何实际实现. 注意点1: 抽象方法必须在抽象类中声明: 不 ...
- Jenkins配置:添加用户和管理权限
Jenkins配置:添加用户和管理权限 参考文章:http://www.cnblogs.com/zz0412/p/jenkins_jj_14.html 今天给大家说说使用Jenkins专有用户数据库的 ...
- Django2.2报错 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
准备将 Django 连接到 MySQL,在命令行输入命令 python manage.py makemigrations 后报错: django.core.exceptions.Improperly ...
- 关于 Noip的考纲
关于 \(\text{Noip}\) 的考纲 先放一张图 : 此图包含了 \(\text{Noip}\) 自开始到结束 的所有真题的考察知识点 算法分类标准主要来自于 \(\text{Luogu}\) ...
- MySQL实战45讲学习笔记：第四十一讲
一.本节概述 我在上一篇文章最后,给你留下的问题是怎么在两张表中拷贝数据.如果可以控制对源表的扫描行数和加锁范围很小的话,我们简单地使用 insert … select 语句即可实现. 当然,为了避免 ...
- webpack与vue环境搭建（转载）
原文:https://www.cnblogs.com/lgx5/p/10732016.html npm安装教程 一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理 ...