在CSSScrivi il codice dell'animazioneche injqueryPiù facile.Ma il limite dei CSS è che non è interattivo.Non può essere chiamato quando si fa clic sul pulsante come con jquery.Ma c'è un trucco per mescolare Javascript con CSS e utilizzare la funzione javascript onclick per chiamare la funzione di animazione CSS.
Il primo è il foglio di stile:
.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';
}
Infine, HTML:Come funziona:
HTML ha contrassegnato un'immagine, quindi ha fatto clic sul pulsante,ani()funzioneEsegui, che è definito nello script scritto sopra.Nella funzione ani(), viene richiesto di ottenereid=”qualcosa”Elementi.Nella parte HTML, c'è una partizione con quell'id, quindi viene chiamata dallo script.Ora, il codice avrà un file chiamatonome della classeInserisci nella sezione definita in CSS sopra, che contiene tutte le informazioni sull'animazione.Pertanto, finché si fa clic sul pulsante, verrà chiamata la funzione ani() e la classe con proprietà di animazione verrà chiamata nella partizione con id=”qualcosa”.
