התקשר לאנימציית 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;}
}


Javascript:


function ani(){
document.getElementById('something').className ='classname';
}


לבסוף, HTML:איך זה עובד:

HTML סימן תמונה, ולאחר מכן לחץ על הכפתור,אני()פוּנקצִיָההפעלה, המוגדרת בסקריפט שנכתב למעלה.בפונקציה ani(), הוא מקבל הוראה לקבלid = "משהו"אלמנטים.בחלק של HTML, יש מחיצה עם המזהה הזה, אז היא נקראת על ידי הסקריפט.כעת, לקוד יהיה קובץ בשםמחלקה של שם הכיתההכנס לתוך הקטע המוגדר ב-CSS למעלה, המכיל את כל המידע על האנימציה.לכן, כל עוד לוחצים על הכפתור, נקראת הפונקציה ani() והמחלקה עם מאפייני האנימציה נקראת למחיצה עם id=”something”.