1. ホーム
  2. animation

[解決済み] 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の値は正しく動作します。