在CSSNapisz kod animacjiniż wjqueryŁatwiej.Ale ograniczenie CSS polega na tym, że nie jest interaktywny.Nie można go wywołać po kliknięciu przycisku, tak jak przy użyciu jquery.Istnieje jednak pewien trik polegający na łączeniu JavaScript i CSS i użyciu funkcji javascript onclick do wywołania funkcji animacji CSS.
Pierwszy to arkusz stylów:
.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';
}
Wreszcie HTML:Jak to działa:
HTML zaznaczył zdjęcie, a następnie kliknął przycisk,ani()funkcjonowaćUruchom, który jest zdefiniowany w skrypcie napisanym powyżej.W funkcji ani() jest poinstruowane, aby uzyskaćid=”coś”Elementy.W części HTML znajduje się partycja o takim identyfikatorze, więc jest ona wywoływana przez skrypt.Teraz kod będzie miał plik o nazwieklasa nazwy klasyWstaw do sekcji zdefiniowanej w CSS powyżej, która zawiera wszystkie informacje o animacji.Dlatego tak długo, jak przycisk jest klikany, wywoływana jest funkcja ani(), a klasa z właściwościami animacji jest wywoływana do partycji z id=”coś”.
