استخدام خاصية CSS3 animation-play-state وأمثلة

خصية CSS3 animation-play-state تحدد ما إذا كان ينبغي تشغيل الأنيميشن أو إيقافه.

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

قواعد استخدام خاصية animation-play-state

قواعد اللغة للخاصية

animation-play-state:　paused　|　running　|　initial　|　inherit

النموذج التالي يوضح كيفية استخدام خاصية animation-play-state.

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

قيمة الخاصية

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

متوافق مع المتصفحات

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

قراءة إضافية

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

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