تُعد الرسوم المتحركة طريقة رائعة لإبراز العناصر التفاعلية وإضافة الاهتمام وممتعة لتصميماتك. تعرّف في هذه الوحدة على كيفية إضافة عناصر التأثيرات المتحركة باستخدام CSS.
قد ترى أحيانًا أدوات مساعدة بسيطة على الواجهات التي توفّر بعض المعلومات المفيدة للحصول على معلومات حول القسم الذي توجد فيه عند النقر فوقها. غالبًا ما يكون لهذه صورة متحركة متقطعة لإعلامك ببراعة أن المعلومات متوفرة التفاعل معه. توضح لك هذه الوحدة كيفية إنشاء عناصر المساعدة هذه والرسوم المتحركة الأخرى، باستخدام خدمة مقارنة الأسعار (CSS).
يمكنك استخدام CSS لتحديد تسلسل للصور المتحركة باستخدام الإطارات الرئيسية. وهذه التسلسلات يمكن أن تكون رسومًا متحركة أساسية من حالة واحدة أو تسلسلات معقدة تستند إلى الوقت.
ما هو الإطار الرئيسي؟
في معظم أدوات الصور المتحركة، الإطارات الرئيسية هي الآلية التي تستخدمها لتعيين الصورة المتحركة حالات إلى الطوابع الزمنية على مخطط زمني.
على سبيل المثال، إليك مخطط زمني لـ "مساعد Google" الذي يومض ونقطة يتم تشغيل الرسوم المتحركة لمدة ثانية واحدة ولها حالتان
هناك نقطة محددة تبدأ وتنتهي فيها كل حالة من حالات الحركة هذه. يمكنك رسمها على المخطط الزمني باستخدام الإطارات الرئيسية.
@keyframes
خدمة مقارنة الأسعار (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;
}
}
سمات animation
لاستخدام @keyframes
في قاعدة CSS، يمكنك تعريف حركة مختلفة
المواقع بشكلٍ فردي، أو استخدام animation
خاصية مختصرة.
animation-duration
.my-element {
animation-duration: 10s;
}
The animation-duration (مدة الرسوم المتحركة)
تحدد هذه السمة المدة التي يجب أن يكون فيها المخطط الزمني @keyframes
كقيمة زمنية.
ويتم ضبط هذه القيمة تلقائيًا على 0 ثانية، ما يعني أنّ الصورة المتحركة ما زالت قيد التشغيل، ولكنّها تبقى غير صالحة.
سرعة رؤيتها. لا يمكنك استخدام قيم وقت سلبية.
animation-timing-function
للمساعدة في إعادة خلق الحركة الطبيعية في الرسوم المتحركة، يمكنك استخدام دوال التوقيت
لحساب سرعة الرسوم المتحركة عند كل نقطة. غالبًا ما تكون القيم المحسوبة
منحنيًا، مما يجعل الرسوم المتحركة تعمل بسرعات مختلفة على مدار
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
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count
عدد مرات تشغيل المخطط الزمني لـ @keyframes
خلال
الرسوم المتحركة. بشكل افتراضي، تكون هذه القيمة 1، مما يعني أن الرسوم المتحركة تتوقف عندما
يصل إلى نهاية جدولك الزمني. لا يمكن أن تكون هذه القيمة رقمًا سالبًا.
لإنشاء تكرار الصورة المتحركة، اضبط عدد التكرار على infinite
. هذه هي الطريقة
الرسوم المتحركة المتقطعة التي تنبض بالحياة من بداية هذا الدرس.
animation-direction
.my-element {
animation-direction: reverse;
}
يمكنك تحديد اتجاه تشغيل المخطط الزمني على الإطارات الرئيسية باستخدام animation-direction, والذي يأخذ القيم التالية:
normal
: القيمة التلقائية التي تتم إعادة توجيههاreverse
: تشغيل للخلف على المخطط الزمني.alternate
: لكل تكرار للرسم المتحرك، يتناوب المخطط الزمني بين الجري للأمام والخلف.alternate-reverse
: مثلalternate
، لكن الصورة المتحركة تبدأ الخط الزمني للخلف.
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay
تحدد مدة الانتظار التي سينتظرها المتصفح قبل بدء تشغيل الحركة.
مثلما الحال مع السمة animation-duration
، يتم تحديد قيمة زمنية.
على عكس animation-duration
، يمكنك تحديد animation-delay
باعتبارها قيمة سالبة
مما يجعل الرسم المتحرك يبدأ من النقطة المقابلة في
الجدول الزمني. على سبيل المثال، إذا كانت مدة الرسوم المتحركة 10 ثوانٍ وقمت بتعيين
من animation-delay
إلى -5s
، تبدأ الصورة المتحركة من منتصف الطريق
الجدول الزمني.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
حالة الرسوم المتحركة
تشغيل الرسوم المتحركة وإيقافها مؤقتًا.
القيمة التلقائية هي running
. في حال ضبط السياسة على paused
، ستتوقف الصورة المتحركة مؤقتًا.
animation-fill-mode
animation-fill-mode
القيم التي تظل موجودة في المخطط الزمني @keyframes
قبل
بدء تشغيل الرسوم المتحركة أو بعد انتهائها. والقيمة التلقائية هي none
، ما يعني أنّ
وعند اكتمال الرسم المتحرك، يتم تجاهل القيم الموجودة في المخطط الزمني.
تشمل الخيارات الأخرى ما يلي:
forwards
: يبقى الإطار الرئيسي الأخير قائمًا، بناءً على اتجاه الصورة المتحركة.backwards
: يستمر ظهور الإطار الرئيسي الأول، بناءً على اتجاه الصورة المتحركة.both
: يستمر ظهور كل من الإطارين الرئيسيين الأول والأخير.
اختصار animation
وبدلاً من تعريف كل خاصية على حدة، يمكنك تعريفها في
اختصار animation
، الذي يتيح لك تحديد خصائص الرسم المتحرك في
بالترتيب التالي:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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
حسّاس لحالة الأحرف؟
الكلمتان الرئيسيتان from
وto
متطابقتان مع:
0%
، 100%
start
، end
0
و1
الاسم "animation-timing-function
" معروف أيضًا باسم:
ما هو الحد الأدنى لعدد الإطارات الرئيسية المطلوبة داخل تأثير الحركة @keyframes
؟