înîn CSSScrieți codul de animațiedecât înîn jqueryMai uşor.Dar limitarea CSS este că nu este interactiv.Nu poate fi apelat la clic pe buton, așa cum puteți face cu jquery.Dar există un truc pentru a amesteca Javascript cu CSS și pentru a folosi funcția onclick javascript pentru a apela funcția de animație CSS.
Prima este foaia de stil:
.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';
}
Și în sfârșit HTML:Cum functioneaza:
HTML etichetează o imagine, apoi dă clic pe butonul,ani()funcţierun, care este definit în scriptul scris mai sus.În funcția ani() este instruit să obținețiid="ceva"Elemente.În partea HTML, există o secțiune cu acel id, deci este apelată de script.Acum, codul va crea un fișier numitclasa de nume de clasăInserați în secțiunea definită mai sus în CSS, care conține toate informațiile despre animație.Deci, ori de câte ori se face clic pe butonul, funcția ani() este apelată și clasa cu proprietatea animată este chemată în partiție cu id="ceva".
