الصور المتحركة

تُعد الرسوم المتحركة طريقة رائعة لإبراز العناصر التفاعلية وإضافة الاهتمام وممتعة لتصميماتك. تعرّف في هذه الوحدة على كيفية إضافة عناصر التأثيرات المتحركة باستخدام CSS.

قد ترى أحيانًا أدوات مساعدة بسيطة على الواجهات التي توفّر بعض المعلومات المفيدة للحصول على معلومات حول القسم الذي توجد فيه عند النقر فوقها. غالبًا ما يكون لهذه صورة متحركة متقطعة لإعلامك ببراعة أن المعلومات متوفرة التفاعل معه. توضح لك هذه الوحدة كيفية إنشاء عناصر المساعدة هذه والرسوم المتحركة الأخرى، باستخدام خدمة مقارنة الأسعار (CSS).

من خلال الضغط على الرموز، يمكنك التأكّد من أنّ المستخدمين التركيز على المعلومات المهمة

يمكنك استخدام CSS لتحديد تسلسل للصور المتحركة باستخدام الإطارات الرئيسية. وهذه التسلسلات يمكن أن تكون رسومًا متحركة أساسية من حالة واحدة أو تسلسلات معقدة تستند إلى الوقت.

ما هو الإطار الرئيسي؟

في معظم أدوات الصور المتحركة، الإطارات الرئيسية هي الآلية التي تستخدمها لتعيين الصورة المتحركة حالات إلى الطوابع الزمنية على مخطط زمني.

على سبيل المثال، إليك مخطط زمني لـ "مساعد Google" الذي يومض ونقطة يتم تشغيل الرسوم المتحركة لمدة ثانية واحدة ولها حالتان

حالات الصور المتحركة في النبض على مدار إطار زمني مدته ثانية واحدة
حالات الصورة المتحركة الوامضة:

هناك نقطة محددة تبدأ وتنتهي فيها كل حالة من حالات الحركة هذه. يمكنك رسمها على المخطط الزمني باستخدام الإطارات الرئيسية.

نفس الرسم التخطيطي كما كان من قبل، ولكن هذه المرة، مع الإطارات الرئيسية
صورة متحركة نابضة بالحياة مع الإطارات الرئيسية

@keyframes

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

خدمة مقارنة الأسعار (CSS) @keyframes تستند إلى نفس مفهوم الإطارات الرئيسية للصور المتحركة.

إليك مثال حالتَين:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

الجزء الأول المهم هو المعرّف المخصّص (custom-ident)، اسم قاعدة الإطارات الرئيسية. المعرّف في هذا المثال هو my-animation. يعمل المعرّف المخصّص مثل اسم دالة، مما يتيح لك الرجوع إلى قاعدة الإطارات الرئيسية في مكان آخر في رمز CSS.

وضمن قاعدة الإطارات الرئيسية، يمثل كل من from وto كلمات رئيسية تمثل 0% 100%، وهما بداية ونهاية الصورة المتحركة. يمكنك إعادة إنشاء القاعدة نفسها على النحو التالي:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

يمكنك إضافة أي عدد تريده من المناصب على طول الإطار الزمني. وفي مثال المساعدة التي تتميز بالوميض، هناك حالتان تُترجمان إلى والإطارات الرئيسية. هذا يعني أن لديك موضعين داخل قاعدة الإطارات الرئيسية التغييرات لكل من هذه الإطارات الرئيسية.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
جرِّب تعديل القاعدة pulse للاطّلاع على كيفية عمل الصورة المتحركة. التغييرات.

سمات animation

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

لاستخدام @keyframes في قاعدة CSS، يمكنك تعريف حركة مختلفة المواقع بشكلٍ فردي، أو استخدام animation خاصية مختصرة.

animation-duration

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

.my-element {
    animation-duration: 10s;
}

The animation-duration (مدة الرسوم المتحركة) تحدد هذه السمة المدة التي يجب أن يكون فيها المخطط الزمني @keyframes كقيمة زمنية. ويتم ضبط هذه القيمة تلقائيًا على 0 ثانية، ما يعني أنّ الصورة المتحركة ما زالت قيد التشغيل، ولكنّها تبقى غير صالحة. سرعة رؤيتها. لا يمكنك استخدام قيم وقت سلبية.

animation-timing-function

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

للمساعدة في إعادة خلق الحركة الطبيعية في الرسوم المتحركة، يمكنك استخدام دوال التوقيت لحساب سرعة الرسوم المتحركة عند كل نقطة. غالبًا ما تكون القيم المحسوبة منحنيًا، مما يجعل الرسوم المتحركة تعمل بسرعات مختلفة على مدار animation-duration، وجعل العنصر يبدو وكأنّه يرتد إذا واجه المتصفح تحسب قيمة بخلاف تلك المحددة في @keyframes.

تتوفر العديد من الكلمات الرئيسية كإعدادات مسبقة في CSS، والتي تُستخدم كقيمة animation-timing-function: linear، ease، ease-in، ease-out، ease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}
حاول تغيير وظيفة توقيت الرسوم المتحركة التي تستخدمها.

تبدو قيم دالة الإرخاء منحنية بسبب حساب الإرخاء باستخدام منحنى بيزي، نوع من الدالة يستخدم لوضع نموذج للسرعة. كل توقيت الكلمات الرئيسية للوظائف، مثل ease، تشير إلى منحنى بيزيه المحدد مسبقًا. في CSS، يمكنك تحديد منحنى بيزيه مباشرةً باستخدام الدالة cubic-bezier()، التي تقبل أربع قيم رقمية: x1 وy1 وx2 وy2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

وترسم هذه القيم كل جزء من المنحنى على طول المحورين "س" و"ص".

منحنى بيزيه على الرسم البياني للتقدم مقابل الرسم البياني الزمني
مثال على منحنى "بيزيه"

يعد فهم منحنيات بيزيه أمرًا معقدًا. الأدوات المرئية، مثل هذه لمنشئي المحتوى التي كتبتها ليا فيرو.

وظيفة التخفيف "steps"

قد تحتاج أحيانًا إلى التحكم بشكل أدق في الصور المتحركة من خلال التحرك في الفواصل بدلاً من التحرك على طول منحنى. وتتيح لك دالة التخفيف steps() تقسيم المخطط الزمني إلى فواصل محددة تساوي المدة.

.my-element {
    animation-timing-function: steps(10, end);
}

الوسيطة الأولى هي عدد الخطوات. إذا كان هناك نفس العدد من الإطارات الرئيسية كخطوات، يتم تشغيل كل إطار رئيسي بالتسلسل طوال المدة الدقيقة خطوتها، دون انتقال بين الحالات. وإذا كان عدد الإطارات الرئيسية أقل من عدد الخطوات، يضيف المتصفح خطوات بين الإطارات الرئيسية اعتمادًا على الوسيطة الثانية.

الوسيطة الثانية هي الاتجاه. إذا تم ضبطها على end، هي افتراضيًا، تنتهي الخطوات في نهاية المخطط الزمني. وإذا تم ضبطها على start، تكتمل الخطوة الأولى من الرسوم المتحركة الخاصة بك بمجرد بدئها، مما يعني أنه ينتهي خطوة واحدة قبل end.

مقارنة الصور المتحركة بخطوات أو بدونها

animation-iteration-count

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count عدد مرات تشغيل المخطط الزمني لـ @keyframes خلال الرسوم المتحركة. بشكل افتراضي، تكون هذه القيمة 1، مما يعني أن الرسوم المتحركة تتوقف عندما يصل إلى نهاية جدولك الزمني. لا يمكن أن تكون هذه القيمة رقمًا سالبًا.

حاوِل تغيير عدد التكرارات لهذه الصورة المتحركة.

لإنشاء تكرار الصورة المتحركة، اضبط عدد التكرار على infinite. هذه هي الطريقة الرسوم المتحركة المتقطعة التي تنبض بالحياة من بداية هذا الدرس.

تتكرر الصورة المتحركة الوامضة بشكل لا نهائي.

animation-direction

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

.my-element {
    animation-direction: reverse;
}

يمكنك تحديد اتجاه تشغيل المخطط الزمني على الإطارات الرئيسية باستخدام animation-direction, والذي يأخذ القيم التالية:

  • normal: القيمة التلقائية التي تتم إعادة توجيهها
  • reverse: تشغيل للخلف على المخطط الزمني.
  • alternate: لكل تكرار للرسم المتحرك، يتناوب المخطط الزمني بين الجري للأمام والخلف.
  • alternate-reverse: مثل alternate، لكن الصورة المتحركة تبدأ الخط الزمني للخلف.
جرِّب تغيير اتجاه الصورة المتحركة.

animation-delay

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

.my-element {
    animation-delay: 5s;
}

animation-delay تحدد مدة الانتظار التي سينتظرها المتصفح قبل بدء تشغيل الحركة. مثلما الحال مع السمة animation-duration، يتم تحديد قيمة زمنية.

على عكس animation-duration، يمكنك تحديد animation-delay باعتبارها قيمة سالبة مما يجعل الرسم المتحرك يبدأ من النقطة المقابلة في الجدول الزمني. على سبيل المثال، إذا كانت مدة الرسوم المتحركة 10 ثوانٍ وقمت بتعيين من animation-delay إلى -5s، تبدأ الصورة المتحركة من منتصف الطريق الجدول الزمني.

حاوِل تغيير مهلة تأخير الصورة المتحركة.

animation-play-state

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

.my-element:hover {
    animation-play-state: paused;
}

حالة الرسوم المتحركة تشغيل الرسوم المتحركة وإيقافها مؤقتًا. القيمة التلقائية هي running. في حال ضبط السياسة على paused، ستتوقف الصورة المتحركة مؤقتًا.

اضغط مع الاستمرار على العنصر المتحرك لإيقاف الصورة المتحركة مؤقتًا

animation-fill-mode

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 16.
  • Safari: 9-

المصدر

animation-fill-mode القيم التي تظل موجودة في المخطط الزمني @keyframes قبل بدء تشغيل الرسوم المتحركة أو بعد انتهائها. والقيمة التلقائية هي none، ما يعني أنّ وعند اكتمال الرسم المتحرك، يتم تجاهل القيم الموجودة في المخطط الزمني. تشمل الخيارات الأخرى ما يلي:

  • forwards: يبقى الإطار الرئيسي الأخير قائمًا، بناءً على اتجاه الصورة المتحركة.
  • backwards: يستمر ظهور الإطار الرئيسي الأول، بناءً على اتجاه الصورة المتحركة.
  • both: يستمر ظهور كل من الإطارين الرئيسيين الأول والأخير.
جرِّب تغيير وضع التعبئة.

اختصار animation

وبدلاً من تعريف كل خاصية على حدة، يمكنك تعريفها في اختصار animation، الذي يتيح لك تحديد خصائص الرسم المتحرك في بالترتيب التالي:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

الاعتبارات الواجب مراعاتها عند العمل على الصور المتحركة

يمكن للمستخدمين ضبط نظام التشغيل على تفضيل الحركة المخفّضة عند التفاعل مع التطبيقات ومواقع الويب. يمكنك اكتشاف هذا الخيار المفضّل باستخدام Prefers-reduced-motion استعلام عن الوسائط:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

وليس بالضرورة أن يكون هذا تفضيلاً لعدم وجود صور متحركة. والأفضل هو عرض سعر أقل والرسوم المتحركة، وخاصةً الرسوم المتحركة غير المتوقعة الأقل. يمكنك معرفة المزيد حول هذا التفضيل والأداء العام في دليل الصور المتحركة.

جرِّب أحد أمثلة الصور المتحركة المصغَّرة.

التحقق من فهمك

اختبر معلوماتك عن الرسوم المتحركة

هل الاسم أو المعرّف المخصّص لصورة متحركة @keyframes حسّاس لحالة الأحرف؟

نعم
🎉
لا
لا تسمح خدمة مقارنة الأسعار (CSS) بأن تحمل صورتَين متحركتَين الاسم نفسه، ولكنّها تسمح بوجود SWOOP وswoop معًا.

الكلمتان الرئيسيتان from وto متطابقتان مع:

‫start، end
يُرجى إعادة المحاولة.
‫0%، 100%
تساوي from القيمة 0% وto هي 100%.
0 و1
يُرجى إعادة المحاولة.

الاسم "animation-timing-function" معروف أيضًا باسم:

توقيت ديناميكي
يُرجى إعادة المحاولة.
تأخير
يُرجى إعادة المحاولة.
الإرخاء
🎉

ما هو الحد الأدنى لعدد الإطارات الرئيسية المطلوبة داخل تأثير الحركة @keyframes؟

1
سيتعامل المتصفّح مع الحالة الحالية للعنصر كإطار رئيسي، لذا يجب توفّر إطار رئيسي واحد على الأقل.
2
يُرجى إعادة المحاولة.
3
يُرجى إعادة المحاولة.
4
يُرجى إعادة المحاولة.