CSS - animation 屬性

CSS animation 是一個簡寫屬性，用於定義以下屬性的值：animation-composition、animation-delay、animatiom-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state 和 animation-timing-function。

語法

animation: name duration timing-function delay iteration-count direction fill-mode play-state composition;

屬性值

值	描述
animation-composition	指示當多個動畫對同一屬性同時產生影響時要應用的複合操作。
animation-delay	指示動畫是否應從動畫的開頭開始或在某個過程中開始，以及元素載入與動畫序列開始之間應經過多長時間。
animation-direction	指示動畫的初始迭代是向前還是向後，以及之後的迭代是否應沿相同方向繼續或每次執行序列時都改變方向。
animation-duration	指示動畫完成一個迴圈需要多長時間。
animation-fill-mode	描述動畫應用於其目標的預執行和後執行樣式。
animation-iteration-count	指示動畫應重複多少次。
animation-name	它給出描述動畫關鍵幀的 @keyframes at-rule 的名稱。
animation-play-state	指示動畫序列應播放還是暫停。
animation-timing-function	描述用於指定動畫中關鍵幀過渡的加速曲線。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 動畫屬性示例

以下示例顯示了 animation 屬性的用法。

具有多個值的動畫屬性

由於 animation 屬性是一個簡寫屬性，因此可以使用它在一個宣告中設定許多其他屬性。在以下示例中，使用了五個屬性 animation-name、animation-duration、animation-timing-function、animation-delay 和 animation-iteration-count。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      @keyframes slideIn {
         from {
               transform: translateX(0%);
         }
         to {
               transform: translateX(400%);
               border-radius: 50%;
               background-color: green;
         }
      }

      .animated-box {
         width: 100px;
         height: 100px;
         animation: slideIn 2s ease-in-out 1s infinite;
      }
   </style>
</head>

<body>
   <h2>
      CSS animation property
   </h2>
   <div class="animated-box"></div>
</body>

</html>

支援的瀏覽器

屬性
animation	43.0	10.0	16.0	9.0	30.0

css_properties_reference.htm

列印頁面

上一個

下一個