在CSSEscribir código de animaciónQue enjqueryMás fácil.Pero la limitación de CSS es que no es interactivo.No se puede llamar cuando se hace clic en el botón como si se usara jquery.Pero hay un truco para mezclar Javascript y CSS y usar la función onclick javascript para llamar a la función de animación CSS.
La primera es la hoja de estilo:
.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';
}
Finalmente, HTML:Cómo funciona:
HTML marcó una imagen y luego hizo clic en el botón,y yo()funciónEjecutar, que se define en el script escrito anteriormente.En la función ani (), se le ordena obtenerid = "algo"Elementos.En la parte HTML, hay una partición con esa identificación, por lo que la secuencia de comandos la llama.Ahora, el código tendrá un archivo llamadonombre de clase de la claseInsertar en la sección definida en CSS arriba, que contiene toda la información sobre la animación.Por lo tanto, mientras se haga clic en el botón, se llamará a la función ani () y la clase con propiedades de animación se llamará a la partición con id = ”algo”.
