定义和用法

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颜色的完整概述,请访问我们的颜色教程

颜色名称 十六进制值 颜色效果 阴影 混合器
AliceBlue  #F0F8FF   阴影 混合器
AntiqueWhite  #FAEBD7   阴影 混合器
Aqua  #00FFFF   阴影 混合器
Aquamarine  #7FFFD4   阴影 混合器
Azure  #F0FFFF   阴影 混合器
Beige  #F5F5DC   阴影 混合器
Bisque  #FFE4C4   阴影 混合器
Black  #000000   阴影 混合器
BlanchedAlmond  #FFEBCD   阴影 混合器
Blue  #0000FF   阴影 混合器
BlueViolet  #8A2BE2   阴影 混合器
Brown  #A52A2A   阴影 混合器
BurlyWood  #DEB887   阴影 混合器
CadetBlue  #5F9EA0   阴影 混合器
Chartreuse  #7FFF00   阴影 混合器
Chocolate  #D2691E   阴影 混合器
Coral  #FF7F50   阴影 混合器
CornflowerBlue  #6495ED   阴影 混合器
Cornsilk  #FFF8DC   阴影 混合器
Crimson  #DC143C   阴影 混合器
Cyan  #00FFFF   阴影 混合器
DarkBlue  #00008B   阴影 混合器
DarkCyan  #008B8B   阴影 混合器
DarkGoldenRod  #B8860B   阴影 混合器
DarkGray  #A9A9A9   阴影 混合器
DarkGrey  #A9A9A9   阴影 混合器
DarkGreen  #006400   阴影 混合器
DarkKhaki  #BDB76B   阴影 混合器
DarkMagenta  #8B008B   阴影 混合器
DarkOliveGreen  #556B2F   阴影 混合器
DarkOrange  #FF8C00   阴影 混合器
DarkOrchid  #9932CC   阴影 混合器
DarkRed  #8B0000   阴影 混合器
DarkSalmon  #E9967A   阴影 混合器
DarkSeaGreen  #8FBC8F   阴影 混合器
DarkSlateBlue  #483D8B   阴影 混合器
DarkSlateGray  #2F4F4F   阴影 混合器
DarkSlateGrey  #2F4F4F   阴影 混合器
DarkTurquoise  #00CED1   阴影 混合器
DarkViolet  #9400D3   阴影 混合器
DeepPink  #FF1493   阴影 混合器
DeepSkyBlue  #00BFFF   阴影 混合器
DimGray  #696969   阴影 混合器
DimGrey  #696969   阴影 混合器
DodgerBlue  #1E90FF   阴影 混合器
FireBrick  #B22222   阴影 混合器
FloralWhite  #FFFAF0   阴影 混合器
ForestGreen  #228B22   阴影 混合器
Fuchsia  #FF00FF   阴影 混合器
Gainsboro  #DCDCDC   阴影 混合器
GhostWhite  #F8F8FF   阴影 混合器
Gold  #FFD700   阴影 混合器
GoldenRod  #DAA520   阴影 混合器
Gray  #808080   阴影 混合器
Grey  #808080   阴影 混合器
Green  #008000   阴影 混合器
GreenYellow  #ADFF2F   阴影 混合器
HoneyDew  #F0FFF0   阴影 混合器
HotPink  #FF69B4   阴影 混合器
IndianRed   #CD5C5C   阴影 混合器
Indigo   #4B0082   阴影 混合器
Ivory  #FFFFF0   阴影 混合器
Khaki  #F0E68C   阴影 混合器
Lavender  #E6E6FA   阴影 混合器
LavenderBlush  #FFF0F5   阴影 混合器
LawnGreen  #7CFC00   阴影 混合器
LemonChiffon  #FFFACD   阴影 混合器
LightBlue  #ADD8E6   阴影 混合器
LightCoral  #F08080   阴影 混合器
LightCyan  #E0FFFF   阴影 混合器
LightGoldenRodYellow  #FAFAD2   阴影 混合器
LightGray  #D3D3D3   阴影 混合器
LightGrey  #D3D3D3   阴影 混合器
LightGreen  #90EE90   阴影 混合器
LightPink  #FFB6C1   阴影 混合器
LightSalmon  #FFA07A   阴影 混合器
LightSeaGreen  #20B2AA   阴影 混合器
LightSkyBlue  #87CEFA   阴影 混合器
LightSlateGray  #778899   阴影 混合器
LightSlateGrey  #778899   阴影 混合器
LightSteelBlue  #B0C4DE   阴影 混合器
LightYellow  #FFFFE0   阴影 混合器
Lime  #00FF00   阴影 混合器
LimeGreen  #32CD32   阴影 混合器
Linen  #FAF0E6   阴影 混合器
Magenta  #FF00FF   阴影 混合器
Maroon  #800000   阴影 混合器
MediumAquaMarine  #66CDAA   阴影 混合器
MediumBlue  #0000CD   阴影 混合器
MediumOrchid  #BA55D3   阴影 混合器
MediumPurple  #9370DB   阴影 混合器
MediumSeaGreen  #3CB371   阴影 混合器
MediumSlateBlue  #7B68EE   阴影 混合器
MediumSpringGreen  #00FA9A   阴影 混合器
MediumTurquoise  #48D1CC   阴影 混合器
MediumVioletRed  #C71585   阴影 混合器
MidnightBlue  #191970   阴影 混合器
MintCream  #F5FFFA   阴影 混合器
MistyRose  #FFE4E1   阴影 混合器
Moccasin  #FFE4B5   阴影 混合器
NavajoWhite  #FFDEAD   阴影 混合器
Navy  #000080   阴影 混合器
OldLace  #FDF5E6   阴影 混合器
Olive  #808000   阴影 混合器
OliveDrab  #6B8E23   阴影 混合器
Orange  #FFA500   阴影 混合器
OrangeRed  #FF4500   阴影 混合器
Orchid  #DA70D6   阴影 混合器
PaleGoldenRod  #EEE8AA   阴影 混合器
PaleGreen  #98FB98   阴影 混合器
PaleTurquoise  #AFEEEE   阴影 混合器
PaleVioletRed  #DB7093   阴影 混合器
PapayaWhip  #FFEFD5   阴影 混合器
PeachPuff  #FFDAB9   阴影 混合器
Peru  #CD853F   阴影 混合器
Pink  #FFC0CB   阴影 混合器
Plum  #DDA0DD   阴影 混合器
PowderBlue  #B0E0E6   阴影 混合器
Purple  #800080   阴影 混合器
RebeccaPurple  #663399   阴影 混合器
Red  #FF0000   阴影 混合器
RosyBrown  #BC8F8F   阴影 混合器
RoyalBlue  #4169E1   阴影 混合器
SaddleBrown  #8B4513   阴影 混合器
Salmon  #FA8072   阴影 混合器
SandyBrown  #F4A460   阴影 混合器
SeaGreen  #2E8B57   阴影 混合器
SeaShell  #FFF5EE   阴影 混合器
Sienna  #A0522D   阴影 混合器
Silver  #C0C0C0   阴影 混合器
SkyBlue  #87CEEB   阴影 混合器
SlateBlue  #6A5ACD   阴影 混合器
SlateGray  #708090   阴影 混合器
SlateGrey  #708090   阴影 混合器
Snow  #FFFAFA   阴影 混合器
SpringGreen  #00FF7F   阴影 混合器
SteelBlue  #4682B4   阴影 混合器
Tan  #D2B48C   阴影 混合器
Teal  #008080   阴影 混合器
Thistle  #D8BFD8   阴影 混合器
Tomato  #FF6347   阴影 混合器
Turquoise  #40E0D0   阴影 混合器
Violet  #EE82EE   阴影 混合器
Wheat  #F5DEB3   阴影 混合器
White  #FFFFFF   阴影 混合器
WhiteSmoke  #F5F5F5   阴影 混合器
Yellow  #FFFF00   阴影 混合器
YellowGreen  #9ACD32   阴影 混合器

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. js监听屏幕方向如何第一次默认不监听

    this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...

  2. zip unzip 压缩解压缩命令

    直接上例子: mkdir test1 touch test1/1.txt touch test1/2.txt zip -r test1.zip test1    #-r 参数是包含文件夹下的文件 un ...

  3. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  4. day75_10_22频率认证和jwt

    一.频率认证原理. 1.从dispatch中获取配置,找到setting中的配置. 2.从thtoyyling中寻找到各个认证类. 3.所有认证类都继承自basethrottle,basethrott ...

  5. C++ class内的=重载,拷贝赋值函数copy op=,重载示例。必须是class内

    #include <iostream> // overloading "operator = " inside class // = 是一元操作符.不写,编译器会提供 ...

  6. C++ trais技术 模板特化的应用

    // traits 的应用 /////////////////////////////////////////// // traits template <typename T> clas ...

  7. Codeforces Round #597 (Div. 2) D. Shichikuji and Power Grid 最小生成树

    D. Shichikuji and Power Grid</centerD.> Shichikuji is the new resident deity of the South Blac ...

  8. Paper | Recovering Realistic Texture in Image Super-resolution by Deep Spatial Feature Transform

    目录 故事背景 空域特征转换 超分辨率网络 发表在2018年CVPR. 摘要 Despite that convolutional neural networks (CNN) have recentl ...

  9. 【12月13日】A股ROE最高排名

    个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名 中公教育(SZ002607) - ROE_TTM:92.66% - ...

  10. 03Shell条件测试

    条件测试 Shell 条件测试 格式 1: test 条件表达式 格式 2: [ 条件表达式 ] 格式 3: [[ 条件表达式 ]] 具体参数说明可以通过 man test 进行查看 文件测试 [ 操 ...