Mengapa Animasi Putaran Imej CSS3 Saya Tidak Berfungsi?

Animasi Putar CSS3: Menyelesaikan Isu CSS untuk Putaran Imej

Animasi CSS3 menyediakan alat yang berkuasa untuk mencipta pengalaman web yang dinamik dan menarik secara visual. Satu kes penggunaan biasa ialah memutar imej atau elemen menggunakan sifat transformasi. Walau bagaimanapun, CSS yang salah boleh menghalang animasi daripada berfungsi dengan betul.

Contoh isu sedemikian disediakan, di mana imej bertujuan untuk berputar 360 darjah tetapi kekal statik. Masalahnya terletak pada CSS yang disediakan.

CSS yang Betul

Untuk menyelesaikan isu tersebut, CSS yang disemak berikut telah dibuat:

.imej {

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 berputar {

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

}
@-webkit-keyframes berputar {

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

}
@keyframes berputar {

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

}

Perbezaan utama terletak pada sifat margin dan pengalihan keluar dari dan ke menyatakan daripada bingkai utama animasi.

Penjelasan

Harta jidar meletakkan imej dengan betul di tengah halaman. Sifat transformasi, yang menggunakan putaran, ditetapkan untuk semua bingkai dalam animasi menggunakan keadaan 100%. Dengan mengalih keluar keadaan dari dan ke, animasi menjadi lebih lancar, mengelakkan peralihan mendadak pada permulaan dan penghujung putaran.

Dengan perubahan ini dilaksanakan, imej animasi kini harus berputar dengan lancar dan berterusan.

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