الرسوم المتحركة باستخدام css

[samaahmad]

الرسوم المتحركة باستخدام CSS

عناصر الموضوع

1- مفهوم الأنيميشين.

2- أساسيات الأنيميشين.

3- عناصر الرسوم المتحركة Animations.

4- خصائص الحركة Animation Properties.

5- استخدام حركات CSS.

6- مزايا حركات CSS.

7- ضبط الحركات.

8- تحديد تسلسل الحركات باستخدام الإطارات المفتاحية.

الرسوم المتحركة باستخدام CSS, في الماضي عند ظهور إعداد مواقع الويب كانت المواقع محددة فقط على النصوص لتبيين الفكرة فقط، ومع الوقت صار رؤية الصور والفيديوهات والوسائط المتنوعة وتنظيم المواقع ومراعاة التصميم لتبدو المواقع على نحو عصري أكثر من الأول.


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


1- مفهوم الأنيميشين
الأنيميشين (Animations) نشأتها جعل خصائص العنصر تتبدل بالتدريج عبر مدة زمنية معينة، وعلى نحو تلقائي الأمر الذي يبين أنك تستطع على إظهار مؤثرات حركية مدهشة في صفحات الويب.
تستطع تزويد أنيميشين أو مؤثرات المرئية لأي عنصر في الصفحة لتبينه على النحو الذي ترغبه، فمثلاً تستطع جعل لونه يتبدل كل مدة محددة، جعله يتنقل أو يلف أو يثقب، جعله يظهر، ويختفي وغيرها من الأشياء التي تقدر فعلها.
في هذا المقال ستتعرف إلى كافة الخصائص الآتية التي عن طريقها تستطيع تزويد أنيميشين للعنصر والتحكم به:


@keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation

للاشتراك في قناة اليوتيوب

اضغط على الرابط التالي

https://www.youtube.com/@albawaabh

للإطلاع على باقي الموضوع

من خلال الرابط التالي

https://albawaabh.com/%d8%a7%d9%84%d...%a7%d9%85-css/

https://albawaabh.com/