เรียกภาพเคลื่อนไหว CSS3 ผ่านเหตุการณ์ onClick

อย่างแรกคือสไตล์ชีต:


.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';
}


สุดท้าย HTML:มันทำงานอย่างไร:

HTML ทำเครื่องหมายรูปภาพแล้วคลิกปุ่มอานิ()การทำงานRun ซึ่งกำหนดไว้ในสคริปต์ที่เขียนไว้ด้านบนในฟังก์ชัน ani() จะได้รับคำสั่งให้รับid="บางสิ่งบางอย่าง"องค์ประกอบ.ในส่วน HTML มีพาร์ติชั่นที่มี id นั้นจึงถูกเรียกโดยสคริปต์ตอนนี้รหัสจะมีไฟล์ชื่อชื่อคลาสของคลาสแทรกลงในส่วนที่กำหนดไว้ใน CSS ด้านบน ซึ่งมีข้อมูลทั้งหมดเกี่ยวกับภาพเคลื่อนไหวดังนั้น ตราบใดที่มีการคลิกปุ่ม ฟังก์ชัน ani() จะถูกเรียก และคลาสที่มีคุณสมบัติแอนิเมชั่นจะถูกเรียกเข้าไปในพาร์ติชั่นที่มี id=”something”