CSS3 画像回転アニメーションが機能しないのはなぜですか?

CSS3 回転アニメーション: 画像回転の CSS 問題の解決

CSS3 アニメーションは、動的で視覚的に魅力的な Web エクスペリエンスを作成するための強力なツールを提供します。一般的な使用例の 1 つは、transform プロパティを使用して画像または要素を回転することです。ただし、CSS が正しくないと、アニメーションが正しく機能しない可能性があります。

このような問題の例として、画像が 360 度回転するはずなのに静止したままになる場合の例を示します。問題は提供された CSS 内にあります。

正しい CSS

問題を解決するために、次の改訂された CSS が作成されました。

<前>.画像{

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 スピン {

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

}
@-webkit-keyframes スピン {

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

}
@keyframes スピン{

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

}

主な違いは、マージン プロパティとアニメーション キーフレームからの from 状態と to 状態の削除にあります。

説明

margin プロパティは、画像をページの中央に正しく配置します。回転を適用する変換プロパティは、100% 状態を使用してアニメーション内のすべてのフレームに設定されます。 from 状態と to 状態を削除すると、アニメーションがよりスムーズになり、回転の開始時と終了時の突然の遷移が回避されます。

これらの変更を実装すると、アニメーション画像はスムーズかつ連続的に回転するようになります。

以上がCSS3 画像回転アニメーションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。