استخدام خاصية animation-name في CSS3 مع أمثلة

الاسم المحدد من قبل الخاصية animation-name في CSS3 يجب تطبيقه على العنصر المحدد لتحديد الرسوم المتحركة.

الجدول أدناه يلخص استخدام الخصائص هذا الخصائص وتاريخ الإصدارات.

استخدام animation-name

هذا الخصائص النحوية كالتالي:

animation-name:　keyframe-name　|　none　|　initial　|　inherit

في المثال أدناه، يتم عرض كيفية استخدام صفة animation-name.

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

قيمة الصفة

يصف الجدول أدناه قيمة هذه الصفة.

مرونة المتصفح

مرونة متصفح animation-name الخاص بالصفة، جميع المتصفحات الشائعة تدعم هذه الصفة.

قراءة متعمقة

يرجى الرجوع إلى التعليمات التالية:حركة CSS3。

خصائص ولوائح مرتبطة:animation،animation-duration،animation-timing-function،animation-delay،animation-iteration-count،animation-direction،animation-fill-mode،animation-play-state،@keyframes。