問:為什麼我無法讓CSS3 旋轉動畫工作,即使使用最新的Chrome ?
A: 要使用CSS3 動畫,除了初始配置之外,還必須定義動畫關鍵影格。
CSS3 動畫是透過使用關鍵影格來實現的,關鍵影格指定元素的樣式如何隨時間變換。要使用 CSS3 動畫,您必須定義動畫計時和關鍵影格。
要建立旋轉動畫,您必須定義從元素開始逐漸旋轉元素的關鍵影格。起點到終點。您可以使用 @keyframes 規則來執行此操作。
以下是一個範例:
<code class="css">@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }</code>
此動畫關鍵影格將元素從 0 度旋轉到 360 度,從而創建旋轉動畫。
定義動畫關鍵影格後,您可以在 HTML 元素的動畫聲明中使用它們。
<code class="css">div { /* Animation timing settings */ animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; }</code>
透過結合動畫計時和關鍵影格定義,您現在擁有一個正常運作的 CSS3 旋轉動畫。
以上是以下是一些標題選項,重點關注旋轉動畫不起作用的問題: 簡單直接的詳細內容。更多資訊請關注PHP中文網其他相關文章!