animation-name
animation-name CSS 屬性指定一個或多個 @keyframes at-rule 的名稱，這些 at-rule 描述了要應用於元素的動畫。多個 @keyframes at-rule 以逗號分隔的名稱列表形式指定。如果指定的名稱與任何 @keyframes at-rule 不匹配，則不會有屬性被動畫化。
試一試
animation-name: none;
animation-name: slide;
animation-name: bounce;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
</section>
#example-element {
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
@keyframes bounce {
from {
background-color: orange;
color: black;
margin-top: 0;
}
to {
background-color: orange;
color: black;
margin-top: 40%;
}
}
通常，為了圖方便，可以使用簡寫屬性 animation 一次性設定所有動畫屬性。
語法
css
/* No animation */
animation-name: none;
/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";
/* Multiple animations */
animation-name: test1, animation4;
animation-name:
none,
-moz-specific,
sliding;
/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;
值
none-
一個特殊的關鍵字，表示沒有關鍵幀。它可以用於停用動畫，而無需更改其他識別符號的順序，或者停用來自層疊的動畫。
<custom-ident>-
一個未加引號的名稱，用於標識動畫。此識別符號由大小寫敏感的字母
a到z、數字0到9、下劃線 (_) 和/或破折號 (-) 的組合組成。第一個非破折號字元必須是字母。此外，識別符號開頭禁止出現兩個破折號。此外，識別符號不能是none、unset、initial或inherit。 <string>-
一系列字元，遵循與上述自定義識別符號相同的規則，只是它們被雙引號 (") 或單引號 (') 包裹。如果
animation-name和對應的@keyframesat-rule 名稱都使用帶引號的字串，則none、全域性關鍵字以及以下劃線或雙破折號開頭的名稱都是有效的，但不推薦。
注意：當您在 animation-* 屬性上指定多個逗號分隔的值時，它們將按照 animation-names 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參閱設定多個動畫屬性值。
正式定義
正式語法
animation-name =
[ none | <keyframes-name> ]#
<keyframes-name> =
<custom-ident> |
<string>
示例
命名動畫
此動畫的 animation-name 為 rotate。
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
將滑鼠懸停在矩形上以啟動動畫。
有關示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-name |
瀏覽器相容性
載入中…