在CSSAnimasyon kodu yazOlduğundanjqueryDaha kolay.Ancak CSS'nin sınırlaması, etkileşimli olmamasıdır.jquery kullanmak gibi butona tıklandığında çağrılamaz.Ancak Javascript ve CSS'yi karıştırmanın ve CSS animasyon işlevini çağırmak için onclick javascript işlevini kullanmanın bir hilesi var.
Birincisi stil sayfasıdır:
.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';
}
Son olarak, HTML:Nasıl çalışır:
HTML bir resmi işaretledi ve ardından düğmeyi tıkladı,ani()işlevYukarıda yazılan komut dosyasında tanımlanan çalıştırın.ani() işlevinde, şunu alması talimatı verilir:id=”bir şey”Elementler.HTML bölümünde, o kimliğe sahip bir bölüm vardır, bu yüzden komut dosyası tarafından çağrılır.Şimdi, kodun adında bir dosya olacaksınıfın sınıf adıAnimasyonla ilgili tüm bilgileri içeren yukarıdaki CSS'de tanımlanan bölüme ekleyin.Bu nedenle, butona tıklandığı sürece, ani() işlevi çağrılacak ve animasyon özelliklerine sahip sınıf, id=”something” ile bölüme çağrılacaktır.
