在CSSÍrjon animációs kódotMint bejqueryKönnyebb.A CSS korlátozása azonban az, hogy nem interaktív.Nem hívható, ha a gombra kattint, mint a jquery használatával.De van egy trükk, hogy összekeverjük a Javascriptet a CSS -sel, és az onclick javascript függvénnyel hívhatjuk meg a CSS animációs funkciót.
Az első a stíluslap:
.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';
}
Végül HTML:Hogyan működik:
A HTML megjelölt egy képet, majd rákattintott a gombra,ani ()funkcióFuttatás, amelyet a fent írt szkript határoz meg.Az ani () függvényben utasítást kap, hogy kapjonid = "valami"Elemek.A HTML részben van egy ilyen azonosítójú partíció, ezért a szkript hívja.Most a kódnak lesz egy nevű fájljaosztálynév osztályaIllessze be a fenti CSS -ben meghatározott részbe, amely minden információt tartalmaz az animációról.Ezért mindaddig, amíg a gombra kattint, az ani () függvény meghívásra kerül, és az animációs tulajdonságokkal rendelkező osztály behívásra kerül a partícióba id = ”valami” -vel.
