قاعدة CSS @keyframes

في CSS، يمكن استخدام @keyframes لإنشاء تأثيرات الحركة، ويتم إنشاء تأثيرات الحركة من خلال تغييرات التدرج من نمط CSS واحد إلى آخر، أثناء عملية الحركة، يمكنك تغيير إعدادات النمط CSS عدة مرات، باستخدام في المرة التي تحدث فيها التغييرات، في المائة، أو الكلمة المفتاحية "from" و "to"، وهي متطابقة مع 0٪ إلى 100٪، 0٪ هي بداية الحركة، و100٪ هي عند انتهاء الحركة. للحصول على دعم المتصفح بشكل أفضل، يجب دائمًا تعريف القواسم المشتركة عند 0٪ و100٪.

@keyframes هي قاعدة جديدة تم إضافتها إلى CSS3، وتعتمد جميع المتصفحات الشائعة على الانترنت لدعم هذه القاعدة (بمقدار ما يتم إضافة المسبق للاستخدام) ولا تدعم المتصفحات التي تعمل بنظام التشغيل IE 9 وأقدم.

قواعد استخدام @keyframes

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

@keyframes animationname {keyframes-selector {css-styles;}};

属性值说明

animationname：定义animation的名称；

keyframes-selector：动画持续时间的百分比，可能的值：0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors；

css-styles ：一个或多个合法的CSS样式属性；

下面的示例显示了实际@keyframes的规则。

　　　　　　.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%;}
　　　　　　}

المعلمات

جدول يصف المعلمات لهذه القاعدة.

متوافقية المتصفح

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

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:أنواع وسائل الإعلام CSS。