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

CSS3 回転アニメーション

この投稿では、期待どおりに動作しない CSS3 回転アニメーションの問題のトラブルシューティングを行います。ユーザーは画像を無限に 360 度回転させるつもりですが、画像は静止したままです。

提供された CSS を調べて原因を特定しましょう:

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

CSS を確認した後、アニメーションが機能するために調整が必要な領域をいくつか特定しました正しく:

• Float: アニメーションが機能するためには float: left プロパティは必要ありません。削除してください。
• 位置: 位置: 絶対プロパティにより、画像が正しく配置されません。これを「position:fixed」に変更します。
• Margin: margin-top プロパティと margin-left プロパティは画像を中央に配置するために使用されますが、アニメーションには必要ありません。
• アニメーション プロパティ: アニメーション プロパティは、キーフレーム自体を除いて正しいようです。 @keyframes ルールでは、to キーフレームと同じ変換プロパティを持つ from キーフレームが欠落しています。

修正された CSS は次のとおりです:

.image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;

    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

これらの調整により、画像はこれで、中心を中心にスムーズに回転するはずです。

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