在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 зураг дээр шошго хийж, дараа нь товчлуурыг дарна.ani()функцажиллуулах бөгөөд энэ нь дээр бичсэн скриптэд тодорхойлогддог.ani() функцэд авахыг заадагid = "ямар нэгэн зүйл"Элементүүд.HTML хэсэгт ийм id-тэй хэсэг байгаа тул скриптээр дуудагддаг.Одоо код нь нэртэй файл үүсгэх болноангийн нэрХөдөлгөөний талаарх бүх мэдээллийг агуулсан CSS-ийн дээр тодорхойлсон хэсэгт оруулна уу.Тиймээс товчлуурыг дарах бүрт ani() функц дуудагдаж, хөдөлгөөнт шинж чанартай анги id="something"-тэй хуваалт руу дуудагдана.
