Pertanyaan Bagaimana cara menganimasikan suatu elemen untuk berayun di CSS3?


Sejak saya melihat situs web Treahouse dan efek tanda berayun di pohon, saya telah mencoba untuk mereproduksinya.

.box{
    width:50px; height:50px;
    background: blue;
    box-shadow: 0 0 5px blue;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
}

Tetapi itu tidak akan berayun.

Ini demo di JS Fiddle.

Saya juga mencoba modifikasi itu.

bod{
  background:blue;
}
.box{
    width:50px; height:50px;
    background: yellow;
    box-shadow: 0 0 10px red,0 0 25px red inset;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    border-radius:50%;
}
@-webkit-keyframes swing {
 from {
   left: -2px;
 }
 to {
   left: 200px;
 }
}

Tetapi itu juga tidak berhasil. Lihat itu demo di JS Fiddle.


4
2018-03-28 15:04


asal


Jawaban:


Anda mungkin ingin mencoba menggunakan transform: rotate() dan seperti dalam komentar sven, ubah awalan menjadi "-moz-" bukan "-webkit-" karena Anda menggunakan animasi mozilla.

Berikut ini contohnya: http://jsfiddle.net/gVCWE/14/

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

Juga, alasan yang mereka miliki -moz-transform-origin: center top; sehingga berputar di bagian atas sehingga menggunakan kiri: -2px ke kiri: 200px tidak akan masuk akal.

EDIT: contoh jsfiddle baru: http://jsfiddle.net/gVCWE/20/


17
2018-03-28 16:05



Ketika saya menggunakan metode di atas, itu bekerja dengan baik di semua browser kecuali IE. Dengan menggunakan kode di bawah ini, 'ayunan' akan bekerja di IE10 & IE11. Sangat menyedihkan bahwa IE9 tidak bisa melakukannya;

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
    -ms-animation:swing 3s infinite ease-in-out;
    -ms-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}

0
2017-12-04 11:05