استدعاء الرسوم المتحركة 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 علامة على صورة ، ثم النقر فوق الزر ،العاني ()وظيفةتشغيل ، والذي تم تعريفه في البرنامج النصي المكتوب أعلاه.في الوظيفة ani () ، يُطلب الحصول عليهامعرف = "شيء"عناصر.في جزء HTML ، يوجد قسم بهذا المعرف ، لذلك يتم استدعاؤه بواسطة البرنامج النصي.الآن ، سيكون للرمز ملف باسماسم الطبقةأدخل في القسم المحدد في CSS أعلاه ، والذي يحتوي على جميع المعلومات حول الرسوم المتحركة.لذلك ، طالما تم النقر فوق الزر ، سيتم استدعاء الوظيفة ani () وسيتم استدعاء الفئة ذات الخصائص المتحركة في القسم مع id = ”something”.