在 CSS 中旋轉動畫

Jay Singh 2023年2月20日 2022年4月20日

CSS CSS Animation

無論是改進按鈕，在頁面載入時消磨時間，還是為登入頁面新增一點額外的風格，動畫都可以有效地保持讀者的注意力並讓他們在你的網站上感到高興。

雖然有多種方法可以將動畫視覺效果新增到網頁，但最簡單的一種方法是使用 CSS 動畫，這需要更多的 HTML 和 CSS 知識才能完成。

如果你想在你的工作中使用 CSS 動畫，最好在開始之前檢視一些成功的 CSS 動畫示例。這項額外的研究可以幫助你為你的專案獲得想法，並向你展示你可以使用這個重要功能做什麼。

構建 CSS 動畫需要三樣東西：

要動畫的 HTML 元素；
將動畫連線到此元素的 CSS 規則；
一系列關鍵幀指定動畫開頭和結尾的樣式。

宣告，例如速度和延遲，可用於進一步定製你的動畫。現在，讓我們看一些 CSS 中旋轉動畫的例子。

使用 CSS 動畫連續旋轉影象

在本例中，我們將向我們希望旋轉的元素新增 CSS 命令。你可以調整 2s 以減慢或加快旋轉持續時間並在動畫中旋轉到 360 度。

例子：

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

輸出：影象將旋轉 360 度。

對於以下示例，我們需要一些包含影象和一些屬性的 HTML 標記。如你所見，我們的圖片元素具有三個類別：rotate、linear 和 infinite。

每個類都需要我們的 CSS 中的宣告塊。在動畫中，旋轉 360 度並修改 2s 以減慢或加快旋轉長度。

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

輸出：影象將旋轉 360 度。