為什麼我的 CSS3 圖像旋轉動畫不起作用？

CSS3 旋轉動畫：解決圖像旋轉的CSS 問題

CSS3 動畫提供了一個強大的工具，用於創建動態且具有視覺吸引力的Web 體驗。常見的用例是使用變換屬性旋轉圖像或元素。但是，不正確的 CSS 可能會導致動畫無法正常運作。

提供了此類問題的範例，其中影像旨在旋轉 360 度但保持靜態。問題出在提供的 CSS 。

正確的CSS

為了解決此問題，已創建以下修訂版CSS：

.image {

position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;

}
@-moz-keyframes spin {

100% { -moz-transform: rotate(360deg); } 

}
@-webkit-keyframes spin {

100% { -webkit-transform: rotate(360deg); } 

}
@keyframes spin {

100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
} 

}

@keyframes spin {

}

主要差別在於margin屬性和刪除動畫關鍵影格的 from 和 to 狀態。

說明

margin 屬性正確地將影像定位在頁面的中心。應用旋轉的變換屬性是使用 100% 狀態為動畫中的所有影格設定的。透過刪除 from 和 to 狀態，動畫變得更加平滑，避免了旋轉開始和結束時的突然過渡。 實施這些變更後，動畫影像現在應該平滑且連續地旋轉。

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