bernyawa dari kiri ke kanan dan kanan ke kiri

Saya punya masalah dengan css3 animate; Saya memiliki dua animasi: satu di atas dan satu lagi di bawah. Animasi teratas akan dimuat dari lebar 0 hingga 100% dan berfungsi dengan baik tetapi animasi kedua harus dimuat dari lebar 0 hingga 100% dari kanan ke kiri dan tidak berfungsi :( Adakah yang bisa menjelaskan alasannya? inilah contoh biola saya:

.left-to-right {animation:myfirst 1s ease;}
.right-to-left {animation:mysecond 1s ease;}

@keyframes myfirst {
  0%   {width:0; margin-left:100%;}
    100% {width: 100%; margin-left: 0;}
}
@keyframes mysecond {
  0%   {width:100%; margin-left: 0;}
    100% {width: 0; margin-left:100%;}
}

html css css-animations
person mcmwhfy    schedule 27.06.2014    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Anda membuat kesalahan pada margin untuk animasi kedua. Anda dapat menghapusnya:

DEMO

@keyframes mysecond {
    0%   {width:0;}
    100% {width: 100%;}
}
person web-tiki    schedule 27.06.2014