خصائص CSS المتعلقة بالرسوم المتحركة
توضح هذه المقالة خصائص CSS المتعلقة بالرسوم المتحركة۔
يمكنك التعرف على طريقة الاستخدام والبنية الخاصة بخصائص @keyframes وanimation وtransition۔
YouTube Video
HTML للمعاينة
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>الرسوم المتحركة والتحولات
قاعدة @keyframes
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}تُستخدم @keyframes في الرسوم المتحركة في CSS لتحديد كيف تتغير الأنماط أثناء الحركة۔ في @keyframes، يتم تحديد تغييرات الأنماط من بداية الرسوم المتحركة إلى نهايتها باستخدام نسب زمنية مئوية أو كلمات رئيسية (from وto)۔
- هذا مثال على رسم متحرك ينزلق فيه عنصر من اليسار إلى اليمين ثم يعود إلى موضعه الأصلي۔
- في هذا المثال، يتم كتابة
slideبعد@keyframes، مما يحدد رسمًا متحركًا باسمslide۔ 0%تمثل بداية الرسوم المتحركة، مع وضع العنصر في موضعه الأصلي باستخدامtranslateX(0)۔50%تمثل منتصف الرسوم المتحركة، حيث يتحرك العنصر بمقدار 200 بكسل إلى اليمين باستخدامtranslateX(200px)۔100%تمثل نهاية الرسوم المتحركة، حيث يعود العنصر إلى موضعه الأصلي۔- في الفئة
box-animation-slide، يتم استخدام خاصيةanimationلتطبيق الرسوم المتحركةslideبفاصل زمني مدته 3 ثوان۔
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- يمكنك التحكم بدقة في الأنماط أثناء الرسوم المتحركة۔ عن طريق تحديد النسب المئوية، يمكنك تطبيق أنماط مختلفة في توقيتات محددة۔
- في هذا المثال، يتغير اللون تدريجيًا من الأحمر إلى الأزرق إلى الأخضر إلى الأصفر ثم يعود إلى الأحمر۔
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- في هذا المثال،
fromتعادل0%وtoتعادل100%۔ يسمح لك هذا بتحديد رسوم متحركة بسيطة۔
الصياغة الأساسية
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name: اسم الرسوم المتحركة۔ يتم تحديد ذلك باستخدام خاصيةanimationأو خاصيةanimation-name۔- النسب المئوية أو الكلمات الرئيسية: استخدم النسب المئوية من
0%إلى100%، أو الكلمات الرئيسيةfrom(تعادل0%) وto(تعادل100%)۔
خاصية animation
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}تُستخدم خاصية animation لتطبيق الرسوم المتحركة على عنصر معين.۔ تُحدد الرسوم المتحركة كيفية تغيير مجموعة من أنماط CSS مع مرور الوقت.۔ باستخدام خاصية animation، يمكنك التحكم في التوقيت، والسلوك، والتأخير، وعدد التكرارات، والمزيد في الرسوم المتحركة.۔
- تُحدد فئة
box-animation-ease-in-outاسم الرسوم المتحركةslideوتستخدم الرسوم المتحركةslideالمحددة في@keyframes.۔3sهو خاصيةanimation-duration، مما يعني أن كل دورة من الرسوم المتحركة تُكمل في 3 ثوانٍ.۔ease-in-outهو خاصيةanimation-timing-function، وهو ما يجعل الرسوم المتحركة تبدأ ببطء، ثم تتسارع، ثم تبطئ مجددًا في النهاية.۔infiniteهو خاصيةanimation-iteration-count، مما يعني أن الرسوم المتحركة ستتكرر إلى ما لا نهاية.۔
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}- تُحدد فئة
box-animation-alternateاسم الرسوم المتحركةcolor-changeوتستخدم الرسوم المتحركةcolor-changeالمحددة في@keyframes.۔1sالموجود بعدease-in-outهو خاصيةanimation-delay، التي تُحدد تأخير بدء الرسوم المتحركة.۔ ستبدأ الرسوم المتحركة بعد ثانية واحدة.۔3الموجود بعد1sهو خاصيةanimation-iteration-count، مما يعني أن الرسوم المتحركة تتكرر ثلاث مرات.۔alternateهو خاصيةanimation-direction، التي تُحدد اتجاه تشغيل الرسوم المتحركة.۔ خاصيةalternateتُحدد أن تشغيل الرسوم المتحركة يتم بشكل متناوب.۔
تركيبة خاصية animation
خاصية animation هي خاصية مختصرة تجمع عدة خصائص فرعية في خاصية واحدة.۔ إليك الخصائص الفرعية الرئيسية:۔
- خاصية
animation-name: تُحدد اسم الرسوم المتحركة التي سيتم تطبيقها.۔ يجب أن يتطابق مع اسم الرسوم المتحركة المُعرف في@keyframes.۔ - خاصية
animation-duration: تُحدد الوقت المطلوب لإكمال دورة واحدة من الرسوم المتحركة.۔ وحدات الوقت هي ثوانٍ (s) أو ميلي ثانية (ms).۔ - خاصية
animation-timing-function: تُحدد منحنى سرعة الرسوم المتحركة.۔ تُستخدم قيم مثلease،linear،ease-in،ease-out،ease-in-out، وما إلى ذلك.۔- تحديد
easeيجعل الرسوم المتحركة تبدأ ببطء، ثم تتسارع، ثم تبطئ مجددًا في النهاية.۔ - تحديد
linearيجعل الرسوم المتحركة تتقدم بسرعة ثابتة من البداية حتى النهاية.۔ - تحديد
ease-inيبدأ الرسوم المتحركة ببطء وينتهي بسرعة۔ - تحديد
ease-outيبدأ الرسوم المتحركة بسرعة وينتهي ببطء۔ - تحديد
ease-in-outيبدأ ببطء، يتقدم بسرعة، وينتهي ببطء۔
- تحديد
- خاصية
animation-delayتحدد التأخير قبل بدء الرسوم المتحركة۔ وحدة الوقت هي إما ثوانٍ أو ميلي ثانية۔ - خاصية
animation-iteration-countتحدد عدد مرات تكرار الرسوم المتحركة۔ تحديدinfiniteسيجعل الرسوم المتحركة تتكرر بلا حدود۔ - خاصية
animation-directionتحدد اتجاه تشغيل الرسوم المتحركة۔ تشمل الخيارات:normal(الاتجاه الأمامي)،reverse(الاتجاه العكسي)،alternate(تلعب بشكل متناوب)، وalternate-reverse(تلعب بشكل متناوب بدءًا بالعكس)۔ - خاصية
animation-fill-modeتحدد حالة الرسوم المتحركة قبل أن تبدأ وبعد أن تنتهي۔ يمكنك تحديد أي من:none،forwards،backwards، أوboth۔ - خاصية
animation-play-stateتحدد ما إذا كانت الرسوم المتحركة تعمل أو متوقفة مؤقتًا۔ يمكنك تحديدrunningأوpaused۔
الملخص
خاصية animation هي أداة قوية لتغيير نمط العناصر ديناميكيًا۔ باستخدام @keyframes، يمكنك تحديد كيفية تغير الأنماط عبر الزمن والتحكم في سلوك الرسوم المتحركة بالتفصيل باستخدام كل خاصية فرعية ضمن animation۔
خاصية transition
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}تُستخدم خاصية transition لتطبيق تأثيرات الرسوم المتحركة على تغييرات أنماط CSS۔ تجعل التغييرات تظهر بشكل سلس خلال تغييرات الحالة مثل hover، focus، active، أو عند تغيير الأنماط ديناميكيًا بواسطة JavaScript۔
لنلقِ نظرة على مثال للفئة transition-box حيث يتغير لون الخلفية بسلاسة عند المرور بالمؤشر فوق زر۔
- في فئة transition-box، تقوم خاصية transition بتطبيق انتقال لمدة ثانيتين على تغيير لون الخلفية۔ تم تحديد التغيير كـ ease، مما يجعله سلسًا۔
- الفئة الزائفة hover تغير لون الخلفية من lightgray إلى steelblue عند مرور مؤشر الفأرة فوق الزر۔ يحدث هذا التغيير بسلاسة خلال الثانيتين المحددتين في فئة transition-box۔
من الممكن تطبيق خاصية transition على خصائص متعددة في وقت واحد۔
- في مثال فئة transition-2-properties، يتغير لون الخلفية خلال 5 ثوانٍ ويتغير العرض خلال 0.5 ثانية۔
الصياغة الأساسية
1/* Basic syntax of transition */
2transition: property duration timing-function delay;propertyيحدد خصائص CSS التي يجب تطبيق الحركة عليها۔ تحديدallيطبّق الحركة على جميع الخصائص۔durationيحدد الوقت اللازم لإكمال الحركة۔ حدد باستخدام الثواني (s) أو الميلي ثانية (ms)۔timing-functionيحدد التغير في سرعة الحركة۔ يمكنك استخدام خيارات مثلease،linear،ease-in،ease-out،ease-in-out، وما إلى ذلك۔delayيحدد وقت التأخير قبل بدء الحركة۔ حدد بالثواني أو الميلي ثانية۔
خصائص مفصلة لـ transition
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition يمكن استخدامه أيضًا كخصائص فردية كما يلي۔
transition-property: يحدد الخاصية التي يتم تطبيق الحركة عليها۔transition-duration: يحدد المدة الزمنية حتى يتم إكمال الحركة۔transition-timing-function: يحدد سرعة تطور الحركة۔ يمكن استخدام خيارات مثلease،linear،ease-in،ease-out،ease-in-out۔transition-delay: يحدد وقت التأخير قبل بدء الحركة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔