ИнЦСС уНапишите код за анимацију比在јкуери улакше.Али ограничење ЦСС-а је то што није интерактиван.Не може се позвати притиском на дугме као што можете са јкуери-јем.Али постоји трик да помешате Јавасцрипт са ЦСС-ом и користите онцлицк јавасцрипт функцију за позивање функције ЦСС анимације.
Прво је листа стилова:
.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;}
}
Јавасцрипт:
function ani(){
document.getElementById('something').className ='classname';
}
И на крају ХТМЛ:Како то ради:
ХТМЛ означава слику, а затим кликне на дугме,ани()函數Покрени, што је дефинисано у горе написаној скрипти.У функцији ани() је наложено да добијеид="нешто"Елементи.У ХТМЛ одељку постоји одељак са тим ИД-ом, па га скрипта позива.Сада ће код креирати датотеку под називомцласснаме цлассУбаците у одељак дефинисан горе у ЦСС-у, који садржи све информације о анимацији.Дакле, кад год се кликне на дугме, позива се функција ани() и позива се класа са анимираним својствима у партицију са ид="нешто".
