在i CSSSkriv animationskodeEnd indi jqueryLettere.Men begrænsningen ved CSS er, at den ikke er interaktiv.Det kan ikke kaldes på knap-klik, som du kan med jquery.Men der er et trick til at blande Javascript med CSS og bruge onclick javascript-funktionen til at kalde CSS-animationsfunktionen.
Først er stilarket:
.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';
}
Og til sidst HTML:Hvordan det virker:
HTML tagger et billede, og klik derefter på knappen,ani()fungererun, som er defineret i scriptet skrevet ovenfor.I funktionen ani() er den instrueret i at fåid="noget"Elementer.I HTML-delen er der en sektion med det id, så det kaldes af scriptet.Nu vil koden oprette en fil kaldetklasse af klassenavnIndsæt i afsnittet defineret ovenfor i CSS, som indeholder alle oplysninger om animationen.Så hver gang der klikkes på knappen, kaldes funktionen ani() og klassen med den animerede egenskab kaldes ind i partitionen med id="noget".
