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顏色的完整概述,請訪問我們的顏色教程

顏色名稱 十六進制值 顏色效果 陰影 混合器
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   陰影 混合器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM