فقرة فرعية #2 من درس: المؤثرات الحركية في لغة CSS

CSS animation keyframes keyframes مع animation في لغة CSS

سوف تتعلم في هذا الدرس المؤثرات الحركية في لغة CSS وهي السماح للغة CSS بعمل مؤثرات حركية دون الحاجه إلي لغة JavaScript.

1 صفوف تعليمية

لغة CSS

4,927 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

طريقة كتابة keyframes مع animations في لغة CSS:

keyframes تجهيز keyframes وهو يبدأ بعلامة @ متبوعاً بكلمة keyframes ليصبح بهذا الشكل keyframes@.
name تحديد اسم keyframes ويكتب الاسم بعد keyframes@ ونفصل بينهم بمسافة.
curly braces نتبع keyframes@ والاسم curly braces بأقواس مجعدة.
values يكتب بداخل curly braces بأقواس مجعدة [from - to] أو النسبة المئوية [0% - 25% - 50%].
property تكتب بداخل [from - to] أو النسبة المئوية [0% - 25% - 50%] خاصية من خصائص CSS مع قيمة مختلفة من إلي ليبدا animation من from وينتهي عند to.

HTML

@keyframes move
{
  from {margin-left: 0;}
  to {margin-left: 150px;}
}