في هدا المقال سنشرح توصيفات الأنميشن و طريقة كثابتها في لغة css.
سأحاول إدراج بعض الأمثلة مع كل توصيف وشرح مفصل للقيم اللإفتراضية .
إدا كانت هده أول مرة تتعامل فيها مع الأنميشن في css فأنصحك بمراجعة الدروس السابقة

1. شرح الأنميشن animation في لغة الأنماط الإنسيابية css
2. أنماط الإنتقالات animation في لغة الأنماط الإنسيابية css

يمكن إعطاء توصيفات الأنميشن مبديئا بطريقتين

1 )
إستخدام التوصيف المختصر animation لإعطاء قيم لجميع توصيفات الأنميشن
مثال :

 animation: myanimation 0.2s linear 0s 1 normal forwards running;

2 ) إستخدام التوصيفات المخصصة بدلا من دلك كالتالي

animation-name : myanimation ;
animation-duration : 0.2s ;
animation-timing-function : linear ;
animation-delay : 0s ;
animation-iteration-count : 1 ;
animation-direction : normal ;
animation-fill-mode : forwards ;
animation-play-state : running ;

لاحض أن قيم التوصيفات المخصصة قد تدرج في التوصيف المختصر animation (مثال 1) بنفس الترتيب المبين في التوصيفات المخصصة ( مثال 2 )

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


1 ) animation-name

إسم الأنميشن
و هو اللدي نحدد من خلاله إسم الأنميشن المراد تطبيقه على العنصر



يمكن تغيير إسم الأنميشن لأنميشن آخر عند أي تفاعل ( الضغط على زر مثلا )

لأجل دلك نتبع الخطوات التالية :

1 ننشئ الأنميشن الجديد المراد التغيير له ( بإسم مختلف )



2 تغيير إسم الأنميشن
و يمكن أن يتم عن طريق جافا سكريبت أو css

كود جافا سكريبت لتغيير إسم الانميشن:

getElementById('theelment').style.animationName = 'animationname2';

كود css

animation-name : animationname2 ;

مثال

إضغط على الزر لتغيير الأنميشن

تغيير الأنميشن



ملاحضة : تغيير إسم الأنميشن لا يعني تغيير الإعدادات الأخرى ضمن توصيف animation


2 ) animation-duration

مدة تنفيد الأنميشن
يمكن تغيير سرعة الحركة عن طريق تغيير المدة

animation-duration : 22s ;

ضع مؤشر الماوس على العنصر لمشاهدة النتيجة




3 ) animation-timing-function

نمط الإنتقال أو الحركة و قد قمت بشرحه بشكل مفصل في درس سابق
شرح توصيفات الأنميشن animation و القيم الخاصة بها لغة الأنماط الإنسيابية css

القيمة الإفتراضية هي ease

نمادج:







4 ) animation-delay

مهلة البدء
و هي الوقت اللتي يجب إنقضائه قبل بدئ الأنميشن
القيمة الإفتراضية : 0s

مثال

animation-delay: 2s;

ضع الماوس على الصورة و إنتظر ثانيتين








5 ) animation-iteration-count

عدد المرات اللتي يتكرر فيها الأنميشن
القيمة الإفتراضية : 1

يمكن إدراج infinie لتكرار الأنميشن بلا حدود

مثال

animation-iteration-count: 2;

ضع مؤشر الماوس على المربع
سيعمل الأنميشن مرتين تم يتوقف



6 ) animation-direction
إتجاه الأنميشن
يمكن من خلال هدا التوصيف قلب إتجاه الأنميشن بعدة خيارات







عادي

animation-direction: normal;

عكسي

 animation-direction: reverse;

متناوب

animation-direction: alternate;

متناوب عكسي

animation-direction: alternate-reverse;

7 ) animation-fill-mod

المئال أو المستقر
و هو المكان أو الموضع اللدي يتخده العنصر بعد الأنميشن
infinie

animation-fill-mode: forwards;

يبقي هدا الإعداد على موضع العنصر عند آخر نقطة وصل إليها الأنميشن

ضع مؤشر الماوس على الصورة

animation-fill-mode: backwards; 

يرجع هدا الإعداد العنصر إلى أول موضع في بداية الأنميشن

ضع مؤشر الماوس على الصورة



8 ) animation-play-state
حالة الأنميشن

القيمة الإفتراضية : running
يمكن تحويل القيمة إلى paused من أجل إيقاف الأنميشن

animation-play-state: paused;

مثال



إنتهى الدرس