طريقة استخدام خاصية animation CSS و أمثلة

خصائص animation CSS هي اختصار لخصائص التاليةanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-modeوanimation-play-state.

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

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

قواعد النحو لهذه الخاصية كالتالي:

animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit

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

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

قيمة الخاصية

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

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

مرونة خصائص animation في المتصفحات، جميع المتصفحات الشائعة تدعم هذه الخاصية. الرقم يمثل إصدار المتصفح الأول الذي يدعم هذه الخاصية.

قراءة متعمقة

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

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