Articles
מבוא ל-CSS
תכונות CSS הקשורות לאנימציות

תכונות 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 כ-animation-name ומשתמשת באנימציה 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 כ-animation-name ומשתמשת באנימציה color-change שמוגדרת ב-@keyframes.
    • 1s אחרי ease-in-out הוא ה-animation-delay, שקובע את העיכוב לפני שהאנימציה מתחילה. האנימציה תתחיל שנייה לאחר מכן.
    • 3 אחרי 1s הוא ה-animation-iteration-count, כלומר שהאנימציה חוזרת על עצמה 3 פעמים.
    • 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 מיישמת מעבר של 2 שניות לשינוי צבע הרקע. השינוי מוגדר כ- ease, מה שהופך אותו לחלק. - הפסאודו-מחלקה hover משנה את צבע הרקע מ- lightgray ל- steelblue כאשר מצביעים על הכפתור. שינוי זה מתרחש בצורה חלקה לאורך 2 השניות שהוגדרו במחלקת 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 Video

תכונות CSS הקשורות לאפקטי פילטר