حركة CSS

حركة CSS

يمكن للـ CSS تحقيق تأثيرات الحركة في عناصر HTML دون استخدام JavaScript أو Flash!

CSS

في هذا الفصل، ستتعلم ما يلي:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

دعم المتصفحات للحركة

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

属性 Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

ما هو حركة CSS؟

الحركة تجعل العنصر يتحرك تدريجيًا من نمط إلى آخر.

يمكنك تعديل أي عدد من خصائص CSS.

لإستخدام الحركة CSS، يجب أولاً تحديد بعض المحاور الرئيسية للحركة.

المحاور الرئيسية تحتوي على الأنماط التي يمتلكها العنصر في وقت معين.

@keyframes القاعدة

إذا كنت قد @keyframes في القواعد المحددة، يتم تحديد الأنماط CSS التي ستتغير تدريجيًا من النمط الحالي إلى النمط الجديد في وقت معين.

لجعل الحركة تعمل، يجب ربط الحركة بعنصر معين.

الامثلة التالية ستحمل "example" الحركة إلى عنصر <div>. الحركة ستستمر لمدة 4 ثوانٍ، حيث سيتم تغيير لون الخلفية للعنصر <div> من "الاحمر" إلى "الأصفر" تدريجيًا:

实例

/* كود التحريك */
@keyframes example {
  من {background-color: red;}
  إلى {background-color: yellow;}
}
/* تطبيق تأثير الحركة على هذا العنصر */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

ملاحظة:animation-duration الخصائص تعرف الزمن المطلوب لإنهاء الحركة. إذا لم تكن قد أضفت أي قيمة animation-duration إذا لم تكن قد أضفت أي قيمة للخصائص، لن يحدث أي حركة لأن القيمة الافتراضية هي 0s (0 ثانية).

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

يمكنك أيضًا استخدام القيم المئوية. من خلال استخدام القيم المئوية، يمكنك إضافة أي عدد من تغييرات الأنماط حسب الحاجة.

الامثلة التالية ستغير لون الخلفية للمكون <div> عند اكتمال الحركة 25%، اكتمال 50%، واكتمال الحركة 100%:

实例

/* كود التحريك */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* العناصر التي يتم تطبيق التحريك عليها */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

النموذج التالي سيغير لون الخلفية ووضع العنصر <div> عند إنجاز 25%، 50% من التحريك، وكذلك عند إنجاز 100% من التحريك:

实例

/* كود التحريك */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* العناصر التي يتم تطبيق التحريك عليها */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

التأخير في التحريك

animation-delay يحدد هذا الخصائص وقت تأخير بدء التحريك.

النموذج التالي يحتوي على تأخير قدره 2 ثانية قبل بدء التحريك:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

亲自试一试

القيم السلبية مسموح بها. إذا تم استخدام القيم السلبية، فإن التحريك سيبدأ في العرض، وكأنه قد عرض لمدة N ثانية.

في هذا المثال، سيبدأ التحريك في العرض، وكأنه قد عرض لمدة 2 ثانية:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

亲自试一试

تحديد عدد مرات تنفيذ التحريك

animation-iteration-count يحدد هذا الخصائص عدد مرات تنفيذ التحريك.

النموذج التالي يقوم بتنفيذ التحريك 3 مرات قبل التوقف:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

亲自试一试

النموذج التالي يستخدم القيمة "infinite" لجعل التحريك يستمر إلى الأبد:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

亲自试一试

تحريك بالاتجاه المعاكس أو المتناوب

animation-direction يحدد هذا الخصائص ما إذا كان التحريك يجب أن يعرض للأمام، للخلف أو بشكل متناوب.

animation-direction يمكن أن تأخذ الخاصية القيم التالية:

  • normal - يعرض التحريك بشكل طبيعي (للأمام). القيمة الافتراضية
  • reverse - يعرض التحريك بالاتجاه المعاكس (للخلف)
  • alternate - يعرض التحريك أولاً للأمام، ثم للخلف
  • alternate-reverse - يعرض التحريك أولاً للخلف، ثم للأمام

النموذج التالي سيركز التحريك في الاتجاه المعاكس (للخلف):

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

亲自试一试

النموذج التالي يستخدم القيمة "alternate" لجعل التحريك يتحرك أولاً للأمام، ثم للخلف:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

亲自试一试

النموذج التالي يستخدم القيمة "alternate-reverse" لجعل التحريك يتحرك أولاً للخلف، ثم للأمام:

实例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

亲自试一试

تحديد منحنى سرعة التحريك للتحريك

animation-timing-function تحدد الخاصية منحنى سرعة التحريك.

animation-timing-function يمكن أن تأخذ الخاصية القيم التالية:

  • ease - تحديد تحريك ببطء في البداية، ثم بالسرعة، ثم ببطء في النهاية (الافتراضي)
  • linear - تحديد تحريك بسرعة ثابتة من البداية إلى النهاية
  • ease-in - تحديد تحريك ببطء في البداية
  • ease-out - تحديد تحريك ببطء في النهاية
  • ease-in-out - تحديد تحريك ببطء في البداية والنهاية
  • cubic-bezier(n,n,n,n) - تعريف قيمك الخاصة في وظيفة الثلاثة بيزارت

هذه الأمثلة تظهر بعض المنحنيات السريعة التي يمكن استخدامها:

实例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

亲自试一试

تحديد نمط التعبئة للتحريك

لا يؤثر التحريك في CSS قبل تشغيل الإطار الرئيسي الأول أو بعد تشغيل الإطار الرئيسي الأخير على العنصر.animation-fill-mode يمكن للخاصية تغيير هذا السلوك.

عند عدم تشغيل التحريك (قبل البدء، بعد الانتهاء، أو كلاهما)،animation-fill-mode تحدد الخاصية نمط العنصر المستهدف.

يمكن أن تأخذ خاصية animation-fill-mode القيم التالية:

  • none - القيمة الافتراضية. لن يتم تطبيق أي نمط على العنصر قبل أو بعد تنفيذ التحريك.
  • forwards - سيحتفظ العنصر بالقيم النمطية التي تم تعيينها في الإطار الرئيسي الأخير (يعتمد على animation-direction وanimation-iteration-count).
  • backwards - سيحصل العنصر على القيم النمطية التي تم تعيينها في الإطار الرئيسي الأول (يعتمد على animation-direction) ويحتفظ بالقيمة أثناء تأخير التحريك.
  • both - سيتبع التحريك في نفس الوقت القواعد السابقة والمعاودة، مما يوسع خصائص التحريك في كلا الاتجاهين.

مثال أدناه يترك عنصر <div> في نهاية التحريك يحتفظ بالقيم النمطية من الإطار الرئيسي الأخير:

实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

亲自试一试

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

亲自试一试

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

亲自试一试

动画简写属性

下例使用六种动画属性：

实例

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

亲自试一试

使用简写的 animation 属性也可以实现与上例相同的动画效果：

实例

div {
  animation: example 5s linear 2s infinite alternate;
}

亲自试一试

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性 描述
@keyframes 规定动画模式。
animation 设置所有动画属性的简写属性。
animation-delay 规定动画开始的延迟。
animation-direction 定动画是向前播放、向后播放还是交替播放。
animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state تحديد ما إذا كانت الحركة تعمل أو تتوقف.
animation-timing-function تحديد مسار سرعة الحركة.