Dans CSSEcrire un code d'animationQue dansjqueryPlus facile.Mais la limitation du CSS est qu'il n'est pas interactif.Il ne peut pas être appelé lorsque le bouton est cliqué comme avec jquery.Mais il existe une astuce pour mélanger Javascript avec CSS et utiliser la fonction javascript onclick pour appeler la fonction d'animation CSS.
La première est la feuille de style :
.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';
}
Enfin, HTML :Comment ça fonctionne:
HTML a marqué une image, puis a cliqué sur le bouton,ani()fonctionRun, qui est défini dans le script écrit ci-dessus.Dans la fonction ani(), il est demandé d'obtenirid="quelque chose"Éléments.Dans la partie HTML, il y a une partition avec cet identifiant, elle est donc appelée par le script.Maintenant, le code aura un fichier nomménom de classe de la classeInsérez dans la section définie dans CSS ci-dessus, qui contient toutes les informations sur l'animation.Par conséquent, tant que le bouton est cliqué, la fonction ani() sera appelée et la classe avec les propriétés d'animation sera appelée dans la partition avec id="quelque chose".
