الرسوم المتحركة 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

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

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

Property
@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

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

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

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

مثال

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

ملاحظة:animation-duration تحدد الخاصية المدة التي يجب أن تستغرقها الرسوم المتحركة حتى تكتمل . إذا animation-durationلم يتم تحديد الخاصية ، فلن تحدث حركة ، لأن القيمة الافتراضية هي 0 ثانية (0 ثانية).

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

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

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

مثال

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
25% {background-color: yellow;}
  50% {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

سيغير المثال التالي كلاً من لون الخلفية وموضع العنصر <div> عندما يكتمل الرسم المتحرك بنسبة 25٪ ، واكتمال 50٪ ، ومرة أخرى عندما يكتمل الرسم المتحرك بنسبة 100٪:

مثال

/* The animation code */
@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;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

تأخير الرسوم المتحركة

animation-delayتحدد الخاصية تأخيرًا لبدء الرسم المتحرك .

المثال التالي له تأخير لمدة ثانيتين قبل بدء الرسم المتحرك:

مثال

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

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

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

مثال

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

يستخدم المثال التالي القيمة "لانهائية" لجعل الحركة تستمر إلى الأبد:

مثال

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

قم بتشغيل الرسوم المتحركة في الاتجاه العكسي أو دورات بديلة

تحدد الخاصية ما 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-time-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تحدد الخاصية نمطًا للعنصر الهدف عندما لا يتم تشغيل الرسوم المتحركة (قبل أن تبدأ ، أو بعد انتهائها ، أو كليهما) .

يمكن أن تحتوي خاصية وضع تعبئة الرسوم المتحركة على القيم التالية:

none- القيمة الافتراضية. لن تطبق الرسوم المتحركة أي أنماط على العنصر قبل أو بعد تنفيذه
forwards- سيحتفظ العنصر بقيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأخير (يعتمد على اتجاه الرسوم المتحركة وعدد مرات تكرار الرسوم المتحركة)
backwards - سيحصل العنصر على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول (يعتمد على اتجاه الرسوم المتحركة) ، ويحتفظ بها أثناء فترة تأخير الرسوم المتحركة
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:

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

❮ سابق التالي ❯

دروس CSS

CSS متقدم

استجابة CSS

شبكة CSS

CSS SASS

أمثلة CSS

مراجع CSS

الرسوم المتحركة CSS