Mengapa Animasi Putar CSS3 Saya Tidak Berfungsi?-tutorial css-php.cn

Mengapa Animasi Putar CSS3 Saya Tidak Berfungsi?

DDD

Lepaskan： 2024-12-08 20:23:14

asal

849 orang telah melayarinya

Why Isn't My CSS3 Rotate Animation Working?

Animasi Putar CSS3

Dalam siaran ini, kami akan menyelesaikan masalah dengan animasi putaran CSS3 yang tidak berfungsi seperti yang diharapkan. Pengguna berhasrat untuk memutarkan imej 360 darjah selama-lamanya, tetapi imej itu kekal pegun.

Mari kita periksa CSS yang disediakan untuk mengenal pasti punca:

.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); 
        }
    }
}

Salin selepas log masuk

Selepas menyemak CSS, kami' telah mengenal pasti beberapa kawasan di mana pelarasan diperlukan untuk animasi berfungsi dengan betul:

Apung: Terapung: sifat kiri tidak diperlukan untuk animasi berfungsi. Alih keluarnya.
Kedudukan: Kedudukan: sifat mutlak menyebabkan imej diletakkan secara tidak betul. Tukar kepada kedudukan: tetap.
Margin: Sifat jidar atas dan jidar kiri digunakan untuk memusatkan imej, tetapi ia tidak diperlukan untuk animasi. Alih keluarnya.
Sifat Animasi: Sifat animasi nampaknya betul, kecuali kerangka utama itu sendiri. Dalam peraturan @keyframes, ia tiada daripada bingkai utama dengan sifat perubahan yang sama seperti bingkai utama.

Berikut ialah CSS yang diperbetulkan:

.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); 
    } 
}

Salin selepas log masuk

Dengan pelarasan ini, imej kini sepatutnya berputar dengan lancar di sekeliling pusatnya.

Atas ialah kandungan terperinci Mengapa Animasi Putar CSS3 Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!