html - 背景として機能する流暢なアニメーション画像?

Question

非常に特殊なクライアントがいます。彼は読み込みイメージの作成を要求しました。しかし、単純な回転ホイールなどはありません。それは彼の製品の回転です。問題は、10 フレームの gif を作成すると、途切れ途切れになり、あまり流暢ではないことです。

ページ読み込みのバックグラウンドとして Web で機能する、他にどのような形式を使用できますか?

Answer 1

回転の意味とそれを動作させたいブラウザーによっては、(ほぼ) 純粋な CSS を使用できる場合があります。

#animated {animation: loading 5s infinite linear}
@keyframes loading {
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
}

<img id="animated" src="logo.png">

MDNには、サポートとプレフィックスが必要なバージョンに関する詳細情報があります。