在CSSTulis kod animasiDaripada masukpertanyaanLebih senang.Tetapi had CSS adalah tidak interaktif.Ia tidak dapat dipanggil ketika butang diklik seperti menggunakan jquery.Tetapi ada helah untuk mencampurkan Javascript dengan CSS dan menggunakan fungsi javascript onclick untuk memanggil fungsi animasi CSS.
Yang pertama adalah helaian gaya:
.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 ia berfungsi:
HTML menandakan gambar, dan kemudian mengklik butang,ani ()fungsiJalankan, yang ditentukan dalam skrip yang ditulis di atas.Dalam fungsi ani (), diperintahkan untuk mendapatkanid = "sesuatu"Unsur.Di bahagian HTML, ada partisi dengan id itu, sehingga dipanggil oleh skrip.Sekarang, kod akan mempunyai fail bernamanama kelas kelasMasukkan ke bahagian yang ditentukan dalam CSS di atas, yang mengandungi semua maklumat mengenai animasi.Oleh itu, selagi butang diklik, fungsi ani () akan dipanggil dan kelas dengan sifat animasi akan dipanggil ke dalam partisi dengan id = "sesuatu".
