CSS3 旋轉動畫不起作用：為什麼我的關鍵影格遺失？

CSS3 旋轉動畫：為什麼不起作用

您遇到了 CSS3 旋轉動畫在程式碼中無法運行的問題。在進行故障排除之前，了解 CSS3 動畫背後的基本原理至關重要。

使用 CSS3 動畫關鍵影格

要利用 CSS3 動畫的強大功能，定義動畫關鍵影格至關重要。關鍵影格指定動畫元素在整個動畫中的不同時間間隔應如何顯示。在您的程式碼中，您引用了名為“spin”的動畫，但這些關鍵影格尚未定義。

請參閱官方 Mozilla 開發人員指南 (https://developer.mozilla.org/en- US/docs/CSS/Tutorials/Using_CSS_animations) 以了解有關 CSS 動畫關鍵影格的詳細資訊。

實作

這裡新增了關鍵影格的片段，用於示範如何實現旋轉動畫有效實現：

HTML:

<code class="html"><div></div></code>

CSS:

<code class="css">div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

在此程式碼中，我們使用「from」定義「旋轉」動畫關鍵影格和「到」選擇器。這些指定元素將從 0 度旋轉開始，並在動畫持續時間內逐漸旋轉到 360 度。

透過合併此關鍵影格定義，您將使旋轉動畫能夠按照程式碼中的預期運行.

以上是CSS3 旋轉動畫不起作用：為什麼我的關鍵影格遺失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！