在CSS vNapíšte animačný kód比在jquery vjednoduchšie.Obmedzenie CSS je však v tom, že nie je interaktívne.Nedá sa zavolať kliknutím na tlačidlo ako v prípade jquery.Existuje však trik, ako zmiešať Javascript s CSS a použiť funkciu javascriptu onclick na zavolanie funkcie animácie CSS.
Prvým je šablóna štýlov:
.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';
}
A nakoniec HTML:Ako to funguje:
HTML označí obrázok a potom klikne na tlačidlo,ani()funkciuRun, ktorý je definovaný v skripte napísanom vyššie.Vo funkcii ani() dostane pokynid="niečo"Prvky.V sekcii HTML je sekcia s týmto ID, takže ju volá skript.Teraz kód vytvorí súbor s názvomclassname classVložte do sekcie definovanej vyššie v CSS, ktorá obsahuje všetky informácie o animácii.Takže pri každom kliknutí na tlačidlo sa zavolá funkcia ani() a trieda s animovanými vlastnosťami sa zavolá do partície s id="niečo".
