animation-name屬性用於指定描述動畫的@keyframes的名稱。
用法:
animation-name:keyframename|none|initial|inherit;
屬性值:animation-name屬性值如下所示:
- 關鍵幀名稱:此屬性用於指定需要與選擇器綁定的關鍵幀的名稱。
- 沒有:它是默認值。用於指定將沒有動畫。
- 初始:此屬性用於將此屬性設置為其默認值。
- 繼承:此屬性用於從其父元素繼承此屬性。
例:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-name Property
</title>
<style>
body {
text-align:center;
width:70%;
}
h1 {
color:green;
}
div {
width:50px;
height:50px;
background:green;
position:relative;
-webkit-animation:geeks 5s infinite;
-webkit-animation-delay:2s;
animation:geeks 5s infinite;
animation-delay:2s;
}
@-webkit-keyframes geeks {
from {
left:0%;
}
to {
left:80%;
}
}
@keyframes geeks {
from {
left:0px;
}
to {
left:80%;
}
}
#one {
animation-direction:alternate-reverse;;
}
@keyframes text {
from {
margin-left:60%;
}
to {
margin-left:0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-name property</h2>
<div class = "gfg"></div>
</body>
</html>
輸出:
支持的瀏覽器:下麵列出了animation-name屬性支持的瀏覽器:
- 穀歌瀏覽器43.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 30.0
- Safari 9.0
相關用法
- HTML Style animationName用法及代碼示例
- CSS transition-property用法及代碼示例
- CSS right屬性用法及代碼示例
- CSS nav-down用法及代碼示例
- CSS nav-up用法及代碼示例
- CSS top屬性用法及代碼示例
- CSS nav-right用法及代碼示例
- CSS all屬性用法及代碼示例
- CSS resize屬性用法及代碼示例
- CSS quotes屬性用法及代碼示例
- HTML DOMRectReadOnly x用法及代碼示例
- CSS nav-left用法及代碼示例
- CSS clear屬性用法及代碼示例
- CSS will-change用法及代碼示例
- CSS bleed屬性用法及代碼示例
注:本文由純淨天空篩選整理自vt_m大神的英文原創作品 CSS | animation-name Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。