Mainkan animasi di klik css

Di sini kita akan mencoba memindahkan gambar secara horizontal ke jarak jauh dengan mengklik tombol. Ini bukan kode yang rumit. Jangan ragu untuk menyalin dan menempelkan kode berikut. Ini dia

Pertama stylesheet

Lanjutkan membaca di bawah ini

.classname
{
width:320px;
height:200px;
background:red;
animation:anyname 2s;
-moz-animation:anyname 2s; /* Firefox */
-webkit-animation:anyname 2s; /* Safari and Chrome */
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
@keyframes anyname
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-moz-keyframes anyname /* Firefox */
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-webkit-keyframes anyname /* Safari and Chrome */
{
from {margin-left:0px;}
to {margin-left:600px;}
}

Javascript

function ani(){
document.getElementById('something').className ='classname';
}
_

Akhirnya HTML

bagaimana cara kerjanya

Markup HTML gambar, dan klik tombol yang menjalankan fungsi ani() yang didefinisikan dalam Script yang ditulis di atas di dalam head. Dalam fungsi ani() diinstruksikan untuk mendapatkan elemen dengan id=”something”. Di bagian HTML ada pembagian dengan id itu sehingga dipanggil oleh skrip. Sekarang kode memasukkan kelas yang disebut classname ke dalam divisi yang didefinisikan di atas dalam CSS dengan semua informasi tentang animasi. Jadi segera setelah tombol diklik, fungsi ani() dipanggil dan memanggil kelas dengan properti animasi ke dalam divisi di mana id=”something”

Pos terkait