CSS @keyframes قاعده‌ی کلید

التعريف والاستخدام

من خلال استخدام قاعدة @keyframes، يمكنك إنشاء تحريك.

مبدأ إنشاء التحريك هو، تحويل مجموعة أنماط CSS إلى مجموعة أخرى.

في عملية التحريك، يمكنك تغيير هذه الأنماط CSS عدة مرات.

بالنسبة لتعريف وقت تغيير الحدث، يمكنك استخدام النسبة المئوية أو الكلمات الرئيسية "من" و"إلى"، وهي متساوية مع 0% و100%.

0% هو وقت بداية التحريك، و100% هو وقت نهاية التحريك.

نصيحة:للحصول على دعم متصفح أفضل، يجب أن تعرف دائمًا المحددات 0% و100%.

نصيحة:يرجى استخدام خصائص التحريك لتحكم في مظهر التحريك، مع ربط التحريك بالمحدد.

注意：!important قاعدة يتم تجاهلها في الكليبات الرئيسية (يرجى الرجوع إلى مثال الأخير في هذه الصفحة).

يرجى الرجوع إلى:

تدريس CSS3:Hausa CSS3 Animation

مثال

مثال 1

使 div 元素匀速向下移动：

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

亲自试一试

例子 2

在一个动画中添加多个 keyframe 选择器：

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

亲自试一试

例子 3

在一个动画中改变多个 CSS 样式：

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

亲自试一试

例子 4

带有多个 CSS 样式的多个 keyframe 选择器：

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

亲自试一试

例子 5

注意：!important 规则在关键帧中被忽略：

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* 被忽略 */
  to   {top: 200px;}
}

亲自试一试

CSS 语法

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

属性值

值 描述
animationname 必需。定义动画的名称。
keyframes-selector

必需。动画时长的百分比。

合法的值：

  • 0-100%
  • from（与 0% 相同）
  • to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

浏览器支持

Hausa Chrome Hausa IE / Edge Hausa Firefox Hausa Safari Hausa Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
Hausa 12.0 -o-