CSS - animation-name 屬性

CSS animation-name 屬性為定義元素動畫的 @keyframes 指定名稱。這些規則以逗號分隔的序列列出，描述了動畫行為。

語法

animation-name: keyframename|none|initial|inherit;

屬性值

值	描述
keyframes	指定要應用於選擇器的關鍵幀的名稱。
none	指定不應用任何動畫，這是預設值。
initial	將屬性設定為其初始值。
inherit	從父元素繼承該屬性。

CSS animation-name 屬性示例

下面列出的示例將使用不同的值說明 animation-name 屬性。

帶關鍵幀的動畫名稱

在示例中，建立了一個名為 slide 的描述動畫的關鍵幀，它與使用這些規則進行框動畫的 .box 類 相關聯。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(300px);
            }
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: teal;
            animation-name: slide;
            /* Assigning the animation name */
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>

<body>
    <h2>CSS Animation Name Property</h2>
    <div class="box"></div>
</body>

</html>

帶 None 的動畫名稱

當動畫名稱設定為 none 時，不會發生任何動畫。在示例中，動畫名稱已設定為 none，因此框是靜態的。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: teal;
            animation-name: none;
            /* Assigning the animation name */
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>

<body>
    <h2>CSS Animation Name Property</h2>
    <div class="box"></div>
</body>

</html>

支援的瀏覽器

屬性
animation-name	43.0	10.0	16.0	9.0	30.0

列印頁面