CSS - @keyframes規則

CSS @keyframes 規則用於透過指定動畫中幀或步驟的序列來定義動畫。該規則透過定義關鍵幀來指定動畫序列中的中間步驟。每個關鍵幀描述動畫在特定時間點（從開始（0%）到結束（100%），以及我們選擇定義的任何中間點）的特定狀態。

語法

@keyframes animation-name {keyframes-selector {css-styles;}}

屬性值

值	描述
animation-name	它指定包含動畫程式碼的關鍵幀的名稱。必需。
關鍵幀選擇器	它指定動畫持續時間的百分比。有效值包括：0% 到 100% / from (0%) - to(100%)。
css樣式	它指定在動畫過程中必須發生更改的 CSS 樣式屬性。

CSS關鍵幀規則示例

以下示例透過不同的示例解釋了@keyframe規則。

使用@Keyframe更改顏色的動畫

以下示例演示了顏色變化動畫。keyframes名稱為colorchange。使用的選擇器是從0%到100%，透過25%、50%和75%。發生變化的樣式屬性是background-color、color和top屬性。

示例

<!DOCTYPE html>
<html>
<head>

   <style>
      .container {
         height: 400px;
         width: 100%;
         background-color: lightgray;
      }
      .container >div{
         position: relative;
         height: 60px;
         border: 3px solid gray;
         animation: colorchange 6s infinite;
         text-align: center;
         font-size: 36px;
         font-weight: bold;
      }
      @keyframes colorchange{
         0%   {top: 0px;  background-color: red; color: white;}
         25%  {top: 75px;  background-color: white; color: black;}
         50%  {top: 150px;  background-color: lightblue; color: brown;}
         75%  {top: 225px;  background-color: #457b9d; color: orange;}
         100% {top: 300px;  background-color: darkblue; color: yellow;}
      }

   </style>
</head>
<body>
   <h2>
      CSS @keyframes rule
   </h2>
   <h4>
      Changing color example
   </h4>
   <div class="container">
      <div>
         TutorialsPoint
      </div>
   </div>
</body>
</html>

使用@Keyframes的運動示例

以下示例演示了運動動畫。keyframes名稱為motion。使用的選擇器是從0%到100%，透過50%。發生變化的樣式屬性是translateX。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         height: 200px;
         width: 100%;
         background-color: lightgray;
         border-bottom: 10px solid orange;
      }

      .container>div {
         position: relative;
         height: 80px;
         width: 80px;
         border-radius: 50%;
         border: 3px solid gray;
         animation: motion 6s infinite;
         top: 117px;
         background-color: black;
      }

      .inner {
         position: relative;
         height: 45px;
         width: 45px;
         border-radius: 50%;
         background-color: lightgray;
         top: 16px;
         left: 17px;
      }

      @keyframes motion {
         0% {
               transform: translateX(0px);
         }
         50% {
               transform: translateX(475px);
         }
         100% {
               transform: translateX(0px);
         }
      }
   </style>
</head>

<body>
   <h2>
      CSS @keyframes rule
   </h2>
   <h4>
      motion example
   </h4>
   <div class="container">
      <div>
         <div class="inner">
         </div>
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
@keyframes	43.0	10.0	16.0	9.0	30.0

css_properties_reference.htm

列印頁面