在у CSSНапісаць код анімацыі比 在у jqueryПрасцей.Але абмежаванне CSS заключаецца ў тым, што ён не інтэрактыўны.Яго нельга выклікаць па націску кнопкі, як з jquery.Але ёсць хітрасць змяшаць Javascript з CSS і выкарыстоўваць функцыю onclick javascript для выкліку функцыі анімацыі CSS.
Па-першае, гэта табліца стыляў:
.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';
}
І, нарэшце, HTML:Як гэта працуе:
HTML пазначае выяву, затым націскае кнопку,ані ()функцыяrun, які вызначаны ў скрыпце, напісаным вышэй.У функцыі ani() гэта даручана атрымацьid = "нешта"Элементы.У частцы HTML ёсць раздзел з гэтым ідэнтыфікатарам, таму ён выклікаецца скрыптам.Цяпер код створыць файл пад назвайклас імя класаУставіць у раздзел, вызначаны вышэй у CSS, які змяшчае ўсю інфармацыю аб анімацыі.Такім чынам, кожны раз, калі націскаецца кнопка, функцыя ani() выклікаецца, і клас з уласцівасцю animated выклікаецца ў раздзел з id="something".
