檢索或設定對象所套用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義
如果提供多個屬性值，以逗號進行分隔。
基本介紹
- 外文名：animation-name
- 所屬分類：操作指令
簡介,示例,
簡介
語法：
animation-name：none | [ , none | ]*
默認值：none
相關屬性：[ @keyframes ]
取值：
none：
不引用任何動畫名稱
：
定義一個或多個動畫名稱(identifier標識)
說明：
檢索或設定對象所套用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationName。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-name
Gecko(Firefox)-moz-animation-name
Presto(Opera)
Trident(IE)-ms-animation-name
W3Canimation-name
示例
div {
opacity: 0;
position: absolute;
top: 50 % ;
left: 50 % ;
width: 300px;
height: 150px;
margin: -75px 0 0 - 150px;
}.over {
border: 3px solid#eee;
background: #e0e0e0;
}.text {
font: bold 14px / 150px Georgia;
text - align: center;
}.over { - webkit - animation: animations 2.5s ease - out,
animations3 1s ease - out 2.5s; - moz - animation: animations 2.5s ease - out,
animations3 1s ease - out 2.5s; - o - animation: animations 2.5s ease - out,
animations3 1s ease - out 2.5s; - ms - animation: animations 2.5s ease - out,
animations3 1s ease - out 2.5s;
animation: animations 2.5s ease - out,
animations3 1s ease - out 2.5s;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: scale(0);
opacity: 0;
}
40 % { - webkit - transform: scale(1);
opacity: 1;
}
100 % {
opacity: 1;
}
}@ - moz - keyframes animations {
0 % { - moz - transform: scale(0);
opacity: 0;
}
40 % { - moz - transform: scale(1);
opacity: 1;
}
100 % {
opacity: 1;
}
}@ - o - keyframes animations {
0 % { - o - transform: scale(0);
opacity: 0;
}
40 % { - o - transform: scale(1);
opacity: 1;
}
100 % {
opacity: 1;
}
}@ - ms - keyframes animations {
0 % { - ms - transform: scale(0);
opacity: 0;
}
40 % { - ms - transform: scale(1);
opacity: 1;
}
100 % {
opacity: 1;
}
}@keyframes animations {
0 % {
transform: scale(0);
opacity: 0;
}
40 % {
transform: scale(1);
opacity: 1;
}
100 % {
opacity: 1;
}
}.text { - webkit - animation: animations2 1.5s ease - out 1s; - moz - animation: animations2 1.5s ease - out 1s; - o - animation: animations2 1.5s ease - out 1s; - ms - animation: animations2 1.5s ease - out 1s;
animation: animations2 1.5s ease - out 1s;
}@ - webkit - keyframes animations2 {
0 % { - webkit - transform: scale(4);
opacity: 0;
}
40 % { - webkit - transform: scale(2);
opacity: 1;
}
70 % { - webkit - transform: scale(2);
opacity: 1;
}
100 % { - webkit - transform: scale(5);
opacity: 0;
}
}@ - moz - keyframes animations2 {
0 % { - moz - transform: scale(4);
opacity: 0;
}
40 % { - moz - transform: scale(2);
opacity: 1;
}
70 % { - moz - transform: scale(2);
opacity: 1;
}
100 % { - moz - transform: scale(5);
opacity: 0;
}
}@ - o - keyframes animations2 {
0 % { - o - transform: scale(4);
opacity: 0;
}
40 % { - o - transform: scale(2);
opacity: 1;
}
70 % { - o - transform: scale(2);
opacity: 1;
}
100 % { - o - transform: scale(5);
opacity: 0;
}
}@ - ms - keyframes animations2 {
0 % { - ms - transform: scale(4);
opacity: 0;
}
40 % { - ms - transform: scale(2);
opacity: 1;
}
70 % { - ms - transform: scale(2);
opacity: 1;
}
100 % { - ms - transform: scale(5);
opacity: 0;
}
}@keyframes animations2 {
0 % {
transform: scale(4);
opacity: 0;
}
40 % {
transform: scale(2);
opacity: 1;
}
70 % {
transform: scale(2);
opacity: 1;
}
100 % {
transform: scale(5);
opacity: 1;
}
}@ - webkit - keyframes animations3 {
0 % { - webkit - transform: scale(1);
opacity: 1;
}
100 % { - webkit - transform: scale(0);
opacity: 0;
}
}@ - moz - keyframes animations3 {
0 % { - moz - transform: scale(1);
opacity: 1;
}
100 % { - moz - transform: scale(0);
opacity: 0;
}
}@ - o - keyframes animations3 {
0 % { - o - transform: scale(1);
opacity: 1;
}
100 % { - o - transform: scale(0);
opacity: 0;
}
}@ - ms - keyframes animations3 {
0 % { - ms - transform: scale(1);
opacity: 1;
}
100 % { - ms - transform: scale(0);
opacity: 0;
}
}@keyframes animations3 {
0 % {
transform: scale(1);
opacity: 1;
}
100 % {
transform: scale(0);
opacity: 0;
}
}
CSS3 Animations
