CSS3 Döndürmek Animasyon

SORU

27 Mayıs 2013, PAZARTESİ

CSS3 Döndürmek Animasyon

<img class="image" src="" alt="" width="120" height="120">

Bu animasyonlu resim iş değil, 360 derecelik bir dönüş yapmak gerekiyordu. Bir şey CSS sadece hareketsiz kalır gibi aşağıda bir sorun sanırım.

Ayrıca, animasyon fizik tanıtmak için herhangi bir yolu var mı?

Çok teşekkürler.

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

CEVAP

27 Mayıs 2013, PAZARTESİ

İştedemo. Doğru animasyon CSS:

.image {
    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 spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Kod üzerinde bazı notlar:

.image kural içi kareler iç içe geçmiş ve bu yanlış
float:left konumlandırılmış öğelerin işe yaramaz
caniuse bak: IE10 -ms- önek ihtiyacı yok

İle ne demek emin değilim "animasyon fizik tanıtmak", ama müdahale edebilirsiniz."", daha fazla bilgi için aşağıdaki bağlantılara bakın: . hareket hızı

Bunu Paylaş: