在CSSAnimationscode schreibenAls injqueryEinfacher.Die Einschränkung von CSS besteht jedoch darin, dass es nicht interaktiv ist.Es kann nicht aufgerufen werden, wenn auf die Schaltfläche geklickt wird, wie bei jquery.Es gibt jedoch einen Trick, um Javascript mit CSS zu mischen und die JavaScript-Funktion onclick zu verwenden, um die CSS-Animationsfunktion aufzurufen.
Das erste ist das Stylesheet:
.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';
}
Schließlich HTML:Wie es funktioniert:
HTML hat ein Bild markiert und dann auf die Schaltfläche geklickt,ani()FunktionAusführen, die im oben geschriebenen Skript definiert ist.In der Funktion ani() wird angewiesen, zu erhaltenid=”etwas”Element von.Im HTML-Teil gibt es eine Partition mit dieser ID, die vom Skript aufgerufen wird.Jetzt hat der Code eine Datei namensKlasse des KlassennamensIn den oben in CSS definierten Abschnitt einfügen, der alle Informationen zur Animation enthält.Daher wird, solange der Button angeklickt wird, die Funktion ani() aufgerufen und die Klasse mit Animationseigenschaften mit id=”something” in die Partition aufgerufen.
