من الدراسات السابقة، نعلم أنه يمكن تحقيق الرسوم المتحركة الانتقالية البسيطة باستخدام سمة الانتقال، ولكن الرسوم المتحركة الانتقالية يمكنها فقط تحديد حالتي البداية والنهاية، ويتم التحكم في العملية بأكملها بواسطة وظيفة محددة، وهي ليست مرنة للغاية. سنقدم في هذا القسم رسومًا متحركة أكثر تعقيدًا - الرسوم المتحركة.
الرسوم المتحركة: على غرار الانتقال، يمكن تحقيق بعض التأثيرات الديناميكية، والفرق هو أن الانتقال يجب أن يتم تشغيله عندما تتغير سمة معينة، بينما يمكن لتأثيرات الرسوم المتحركة تشغيل تأثيرات ديناميكية تلقائيًا. لتعيين تأثيرات الرسوم المتحركة، يجب عليك أولاً تعيين إطار رئيسي لتعيين كل خطوة من خطوات تنفيذ الرسوم المتحركة. تنسيق إعدادات الإطار الرئيسي هو كما يلي:
<style>/*تحديد الإطارات الرئيسية للرسوم المتحركة. اسم الإطار الرئيسي هو test*/@keyframestest{/*من يشير إلى موضع البداية للرسوم المتحركة، والذي يمكن التعبير عنه أيضًا بنسبة 0%. */from{margin-left:0;}/*to يشير إلى الموضع النهائي للرسوم المتحركة، والذي يمكن أيضًا التعبير عنه بنسبة 100%. */to{margin-left:100%;}}</style>تشبه الرسوم المتحركة في CSS الرسوم المتحركة إطارًا بإطار في الفلاش، فهي حساسة ومرنة للغاية. يمكن أن يحل استخدام الرسوم المتحركة في CSS محل الصور الديناميكية أو الرسوم المتحركة في الفلاش أو المؤثرات الخاصة التي يتم تنفيذها في JavaScript في العديد من صفحات الويب.
الرسوم المتحركة هي تأثير تغيير عنصر تدريجيًا من نمط إلى آخر. يمكننا تغيير العديد من الأنماط كما نريد عدة مرات كما نريد (إجابة رسمية للغاية).
خاصية CSS3animation (الرسوم المتحركة).
@keyframes
باستخدام قاعدة @keyframes يمكننا إنشاء رسوم متحركة.
يتم إنشاء الرسوم المتحركة عن طريق التغيير التدريجي لمجموعة من أنماط CSS إلى أخرى. يمكننا تغيير هذه المجموعة من أنماط CSS عدة مرات أثناء الرسوم المتحركة. تحديد الوقت الذي يحدث فيه التغيير كنسبة مئوية، أو عبر الكلمتين الأساسيتين "من" و"إلى"، اللتين تعادلان 0% و100%.
0% هو وقت بدء الرسم المتحرك، و100% هو وقت انتهاء الرسم المتحرك. للحصول على أفضل دعم للمتصفح، يجب علينا دائمًا تحديد محددات 0% و100%. هنا 0% عبارة عن إطار واحد، و50% عبارة عن إطار واحد، و100% عبارة عن إطار واحد أيضًا.
وأخيرًا، استخدم خصائص الرسوم المتحركة للتحكم في مظهر الرسوم المتحركة وربط الرسوم المتحركة بالمحدد
مطلوب اسم الرسوم المتحركة. يحدد اسم الرسوم المتحركة.
مطلوب محدد الإطارات الرئيسية. القيم القانونية لنسبة مدة الرسوم المتحركة: 0-100% من (مثل 0%) إلى (مثل 100%)
أنماط CSS المطلوبة. واحدة أو أكثر من خصائص نمط CSS القانونية
على سبيل المثال:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;left:100px;background:yellow; }75%{أعلى:100px;يسار:0px;خلفية:أخضر;}100%{أعلى:0px;يسار:0px;خلفية:أحمر;}}1. سمة اسم الرسوم المتحركة: قم بتعيين اسم الرسوم المتحركة الذي يجب ربطه بالعنصر.
يتم استخدام سمة اسم الرسوم المتحركة لربط الرسوم المتحركة بعنصر HTML المحدد، وتكون القيم الاختيارية للسمة كما يلي:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: نسبي;اسم الرسوم المتحركة:كرة;</style></head><body><div></div></body></html>نتائج التشغيل:
ملاحظة: لكي يتم تشغيل الرسوم المتحركة بنجاح، تحتاج أيضًا إلى تحديد سمة مدة الرسوم المتحركة. وإلا فلن يتم تشغيل الرسوم المتحركة لأن القيمة الافتراضية لسمة مدة الرسوم المتحركة هي 0.
2. سمة مدة الرسوم المتحركة: تحدد عدد الثواني أو المللي ثانية التي تستغرقها الرسوم المتحركة لإكمال الدورة.
● الوقت: حدد الوقت الذي يستغرقه اكتمال الرسم المتحرك. القيمة الافتراضية هي 0، مما يعني عدم وجود تأثير للحركة.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: نسبي;اسم الرسوم المتحركة:كرة;مدة الرسوم المتحركة:ثانيتان;</style></head><body><div></div></body></html>3. وظيفة توقيت الرسوم المتحركة: تسمى الوظيفة الرياضية المستخدمة منحنى بيزيير المكعب ومنحنى السرعة. باستخدام هذه الوظيفة، يمكنك استخدام القيمة الخاصة بك، أو استخدام إحدى القيم المحددة مسبقًا.
●خطي: سرعة الرسوم المتحركة هي نفسها من البداية إلى النهاية؛
●سهولة: افتراضي. تبدأ الرسوم المتحركة منخفضة، ثم تتسارع وتتباطأ قبل أن تنتهي؛
●Ease-in: يبدأ الرسم المتحرك بسرعة منخفضة؛
●ease-out: تنتهي الرسوم المتحركة بسرعة منخفضة؛
●ease-in-out: يبدأ الرسم المتحرك وينتهي بسرعة منخفضة؛
●cubic-bezier (n,n,n,n): استخدم الدالة cube-bezier() لتحديد سرعة تشغيل الرسوم المتحركة. نطاق قيمة المعلمة هو قيمة بين 0 و1.
4. سمة تأخير الرسوم المتحركة: تحدد متى تبدأ الرسوم المتحركة.
●الوقت: اختياري. يحدد الوقت بالثواني أو بالمللي ثانية للانتظار قبل بدء الرسوم المتحركة. القيمة الافتراضية هي 0.
ملاحظة: يمكن أن تكون الوحدة ثانية (ث) أو ميلي ثانية (مللي ثانية).
5. سمة الرسوم المتحركة-التكرار-عدد: تحدد عدد المرات التي يجب تشغيل الرسوم المتحركة فيها.
القيم الاختيارية للسمة هي كما يلي:
6. سمة اتجاه الرسوم المتحركة: تحدد ما إذا كان سيتم تشغيل الرسوم المتحركة في الاتجاه المعاكس في حلقة.
●عادي: القيمة الافتراضية. يتم تشغيل الرسوم المتحركة بشكل طبيعي؛
●عكسي: يتم تشغيل الرسوم المتحركة في الاتجاه المعاكس؛
●البديل: يتم تشغيل الرسوم المتحركة للأمام بأرقام فردية (1، 2، 5...) وبالعكس بأرقام زوجية (2، 4، 6...)؛
●العكس البديل: يتم تشغيل الرسوم المتحركة في الاتجاه العكسي في الأوقات ذات الأرقام الفردية (1، 3، 5...) وفي الاتجاه الأمامي في الأوقات ذات الأرقام الزوجية (2، 4، 6...).
7. سمة وضع ملء الرسوم المتحركة: تحدد النمط الذي سيتم تطبيقه على العنصر عندما لا يتم تشغيل الرسوم المتحركة (عند اكتمال الرسوم المتحركة، أو عندما يكون للرسوم المتحركة تأخير قبل بدء التشغيل).
ملاحظة: بشكل افتراضي، لا تؤثر الرسوم المتحركة لـ CSS على العنصر حتى يتم تشغيل الإطار الرئيسي الأول، وتتوقف عن التأثير على العنصر بعد اكتمال الإطار الرئيسي الأخير. تتجاوز خاصية وضع تعبئة الرسوم المتحركة هذا السلوك.
● لا يوجد قيمة افتراضية. : لن تطبق الرسوم المتحركة أي أنماط على العنصر الهدف قبل وبعد تنفيذ الرسوم المتحركة؛
●forward: بعد انتهاء الرسم المتحرك (يتم تحديده بواسطة عدد تكرار الرسوم المتحركة)، ستطبق الرسوم المتحركة قيمة السمة هذه؛
●backwards: ستطبق الرسوم المتحركة قيم الخصائص المحددة في الإطار الرئيسي الذي بدأ التكرار الأول للرسوم المتحركة أثناء تعريف تأخير الرسوم المتحركة. هذه هي القيم الموجودة في الإطار الرئيسي (عندما يكون اتجاه الرسوم المتحركة "عاديًا" أو "بديلًا") أو في الإطار الرئيسي (عندما يكون اتجاه الرسوم المتحركة "عكسيًا" أو "عكسيًا بديلًا")؛
● تتبع كلا الرسوم المتحركة قواعد الأمام والخلف. أي أن الرسوم المتحركة توسع خاصية الرسوم المتحركة في كلا الاتجاهين.
8.animation-play-state: يحدد ما إذا كانت الرسوم المتحركة قيد التشغيل أو متوقفة مؤقتًا.
●متوقف مؤقتًا: يحدد إيقاف الرسوم المتحركة مؤقتًا؛
●التشغيل: حدد الرسوم المتحركة الجاري تشغيلها.
9. الأولي: اضبط الخاصية على قيمتها الافتراضية.
●initial: يتم استخدام الكلمة الأساسية لتعيين خصائص CSS إلى قيمها الافتراضية؛
●initial: يمكن استخدام الكلمة الأساسية لأي سمة CSS في أي عنصر HTML.
10. وراثة: وراثة السمات من العناصر الأصل.
●وراثة: تحدد الكلمة الأساسية أن السمة يجب أن ترث قيمتها من العنصر الأصلي؛
●inherit: يمكن استخدام الكلمة الأساسية لأي سمة CSS في أي عنصر HTML.
الرسوم المتحركة
سمة الرسوم المتحركة هي اختصار لاسم الرسوم المتحركة، ومدة الرسوم المتحركة، ووظيفة توقيت الرسوم المتحركة، وتأخير الرسوم المتحركة، وعدد تكرار الرسوم المتحركة، واتجاه الرسوم المتحركة، ووضع تعبئة الرسوم المتحركة، وحالة تشغيل الرسوم المتحركة، من خلال الرسوم المتحركة يمكن للسمة تحديد العديد من السمات المذكورة أعلاه في نفس الوقت، ويكون تنسيق بناء الجملة كما يلي:
الرسوم المتحركة: الرسوم المتحركة - الاسم - الرسوم المتحركة - المدة - الرسوم المتحركة - وظيفة التوقيت - الرسوم المتحركة - التأخير - الرسوم المتحركة - التكرار - العد - الرسوم المتحركة - الاتجاه - الرسوم المتحركة - وضع التعبئة - الرسوم المتحركة - حالة التشغيل ؛
تتوافق كل معلمة مع كل سمة تم تقديمها أعلاه. إذا تم حذف واحدة أو أكثر من القيم، فسيتم استخدام القيمة الافتراضية المقابلة للسمة.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>الرسوم المتحركة</title><style>.box1{width:700px;height:500px;background-color:silver;}.box2{width :100px;الارتفاع: 100px;لون الخلفية:#bfa;الهامش الأيسر:10px;/*اسم الرسوم المتحركة:اختبار;*//*مدة الرسوم المتحركة:4ث;*//*وظيفة توقيت الرسوم المتحركة:خطي; *//*عدد تكرار الرسوم المتحركة: 4;*//*اتجاه الرسوم المتحركة: بديل;*//*وضع ملء الرسوم المتحركة: للخلف;*//*تأخير الرسوم المتحركة: 2 ثانية;*/ الرسوم المتحركة:test2slinear1s4alternate; }/*تحديد الإطارات الرئيسية للرسوم المتحركة. اسم الإطار الرئيسي هو test*/@keyframestest{/*من يشير إلى موضع البداية للرسوم المتحركة، والذي يمكن التعبير عنه أيضًا بنسبة 0%. */from{margin-left:50px;background-color:orange;}/* للإشارة إلى الموضع النهائي للرسوم المتحركة، والذي يمكن أيضًا التعبير عنه بنسبة 100%. */to{margin-left:600px;background-color:yellow;}}/*التحكم في تشغيل الرسوم المتحركة*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>