在në CSSShkruani kodin e animacionitsesa nënë jqueryMë e lehtë.Por kufizimi i CSS është se nuk është ndërveprues.Nuk mund të thirret në klikimin e butonit siç mundeni me jquery.Por ekziston një truk për të përzier Javascript me CSS dhe për të përdorur funksionin onclick javascript për të thirrur funksionin e animacionit CSS.
Së pari është fleta e stilit:
.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';
}
Dhe së fundi HTML:Si punon:
HTML etiketon një imazh, pastaj klikon butonin,ani ()funksioninrun, i cili përcaktohet në skriptin e shkruar më sipër.Në funksionin ani() udhëzohet të marrëid = "diçka"Elementet.Në pjesën HTML, ekziston një seksion me atë id, kështu që thirret nga skripti.Tani, kodi do të krijojë një skedar të quajturklasa e emrit të klasësFuteni në seksionin e përcaktuar më sipër në CSS, i cili përmban të gjithë informacionin rreth animacionit.Pra, sa herë që klikohet butoni, thirret funksioni ani() dhe klasa me vetinë e animuar thirret në ndarjen me id="something".
