在CSSSkriv animasjonskodeenn ijqueryLettere.Men begrensningen med CSS er at den ikke er interaktiv.Den kan ikke kalles når knappen klikkes som ved å bruke jquery.Men det er et triks å blande Javascript og CSS og bruke onclick javascript-funksjonen for å kalle CSS-animasjonsfunksjonen.
Den første 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';
}
Til slutt, HTML:Hvordan det fungerer:
HTML merket et bilde og klikket på knappen,ani()funksjonKjør, som er definert i skriptet skrevet ovenfor.I funksjonen ani() blir det bedt om å fåid = "noe"Elementer.I HTML-delen er det en partisjon med den id-en, så den kalles opp av skriptet.Nå vil koden ha en fil som heterklasse av klassenavnSett inn i delen definert i CSS ovenfor, som inneholder all informasjon om animasjonen.Derfor, så lenge knappen klikkes, vil funksjonen ani() bli kalt og klassen med animasjonsegenskaper kalles inn i partisjonen med id=”noe”.
