[解決済み] CSS3 連続回転アニメーション (日時計を読み込むように)
2022-09-05 02:42:44
質問
私は、PNGとCSS3アニメーションを使用して、Appleスタイルのアクティビティインジケータ(日時計のロードアイコン)を再現しようとしています。私は画像を回転させ、それを連続的に行っていますが、アニメーションが終了した後、次の回転を行う前に遅延があるようです。
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
アニメーションの時間を変更してみましたが、違いはありません。もし、5秒など遅くすると、最初の回転の後、再び回転する前に間があることがより明らかになります。私が取り除きたいのは、この休止です。
どんな助けでも大いに感謝します、ありがとう。
どのように解決するのですか?
ここでの問題は、あなたが提供した
-webkit-TRANSITION-timing-function
を指定したことです。
-webkit-ANIMATION-timing-function
. 0から360の値は正しく動作します。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン