אנימציות

אנימציה היא דרך נהדרת להדגיש רכיבים אינטראקטיביים, ולהוסיף עניין לעיצובים שלך. ביחידה הזו נסביר איך להוסיף אפקטים של אנימציה ולשלוט בהם באמצעות CSS.

לפעמים רואים ממשקים עם עזרה קטנה, שכאשר לוחצים עליהם, הם מספקים מידע מועיל לגבי אותו קטע. האנימציות האלה בדרך כלל כוללות אנימציה מהבהבת כדי ליידע אתכם שיש מידע ושצריך לקיים איתה אינטראקציה. אבל איך אפשר לעשות את זה עם CSS?

ב-CSS, אפשר ליצור אנימציה מהסוג הזה באמצעות אנימציות CSS, שמאפשרות להגדיר רצף אנימציה באמצעות תמונות מפתח. האנימציות יכולות להיות אנימציות פשוטות עם מצב אחד, או אפילו רצפים מורכבים שמבוססים על זמן.

מהי תמונת מפתח?

בתוכנות אנימציה, ב-CSS וברוב הכלים האחרים שמאפשרים ליצור אנימציה, תמונות מפתח הן המנגנון שבו משתמשים כדי להקצות מצבי אנימציה לחותמות זמן בציר הזמן.

לצורך כך, נשתמש במילה "המבהיק". האנימציה כולה רצה במשך שנייה אחת ומתפרסת על שני מצבים.

יש נקודה ספציפית שבה כל אחד ממצבי האנימציה האלה מתחיל ומסתיים. אתם ממפים אותן על ציר הזמן באמצעות תמונות מפתח.

@keyframes

עכשיו אתם יודעים מהי תמונת מפתח, הידע הזה אמור לעזור לכם להבין איך פועל הכלל @keyframes ב-CSS. הנה כלל בסיסי עם שני מצבים.

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

החלק הראשון שכדאי לשים לב אליו הוא המזהה המותאם אישית (מזהה מותאם אישית), או, במונחים אנושיים יותר, השם של כלל תמונות המפתח. המזהה של הכלל הזה הוא my-animation. המזהה המותאם אישית פועל כמו שם של פונקציה. כפי שלמדתם במודול הפונקציות, תוכלו להפנות לכלל תמונות המפתח במקומות אחרים בקוד ה-CSS.

בכלל תמונות המפתח, from ו-to הן מילות מפתח שמייצגות את 0% ואת 100%, שהן ההתחלה והסוף של האנימציה. ניתן ליצור מחדש את אותו כלל, באופן הבא:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

אפשר להוסיף כמה מיקומים שרוצים במסגרת הזמן. בדוגמה של "הבהוב", יש 2 מצבים שמתורגמים לשתי תמונות מפתח. המשמעות היא שיש 2 מיקומים בתוך כלל תמונות המפתח שמייצגים את השינויים בכל אחת מתמונות המפתח.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

המאפיינים animation

כדי להשתמש ב-@keyframes בכלל CSS, צריך להגדיר מאפייני אנימציה שונים או להשתמש במאפיין הקיצור animation.

animation-duration

.my-element {
    animation-duration: 10s;
}

המאפיין animation-duration מגדיר את משך הזמן של @keyframes. הוא צריך להיות ערך זמן. ברירת המחדל היא 0 שניות, כך שהאנימציה עדיין פועלת, אבל אי אפשר לראות אותה מהר מדי. לא ניתן להוסיף ערכי זמן שליליים.

animation-timing-function

כדי ליצור מחדש תנועה טבעית באנימציה, תוכלו להשתמש בפונקציות תזמון שמחשבות את מהירות האנימציה בכל נקודה. ערכים מחושבים לרוב מעוגלים, מה שגורם לאנימציה לפעול במהירויות משתנות במהלך animation-duration. אם מחושב ערך מעבר לערך שהוגדר ב-@keyframes, הרכיב נראה ככזה.

יש כמה מילות מפתח זמינות כהגדרות קבועות מראש ב-CSS, שמשמשות כערך של animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

נראה שהערכים עקומה עם פונקציות התאמה, כי ההתאמה מחושבת באמצעות עקומת בזייה שמשמשת לבניית המודל של המהירות. כל אחת ממילות המפתח של פונקציית התזמון, כמו ease, מתייחסת לעקומת בזייה מוגדרת מראש. ב-CSS אפשר להגדיר עקומת בזייה ישירות באמצעות הפונקציה cubic-bezier(), שמקבלת ארבעה ערכים של מספרים: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

הערכים האלה מראים כל חלק של העקומה לאורך ציר ה-X וציר ה-Y.

להבין את עקומות בזייה הוא מסובך וויזואלי, כמו המחולל הזה של ליאה וורו שמאוד שימושי.

פונקציית ההתאמה steps

לפעמים תרצו שליטה פרטנית יותר באנימציה, ובמקום לנוע לאורך עקומה, תרצו להתקדם במרווחים במקום זאת. פונקציית ההתאמה steps() מאפשרת לחלק את ציר הזמן למרווחים שווים.

.my-element {
    animation-timing-function: steps(10, end);
}

הארגומנט הראשון הוא מספר השלבים. אם כל תמונה מוגדרת כ-10 שלבים ויש בה 10 תמונות מפתח, כל תמונת מפתח תופעל ברצף למשך הזמן המדויק, ללא מעבר בין מצבים. אם אין מספיק תמונות מפתח בשלבים, השלבים בין תמונות המפתח יתווספו בהתאם לארגומנט השני.

הארגומנט השני הוא הכיוון. אם היעד הוא end, שהוא ברירת המחדל, השלבים יסתיימו בסוף ציר הזמן. אם המדיניות מוגדרת לערך start, השלב הראשון של האנימציה יושלם ברגע שהוא מתחיל. כלומר, הוא מסתיים שלב אחד לפני end.

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

המאפיין animation-iteration-count מגדיר כמה פעמים ציר הזמן @keyframes יפעל. כברירת מחדל, הצבע הוא 1, ולכן כשהאנימציה מגיעה לסוף ציר הזמן, היא תיעצר בסוף. המספר לא יכול להיות שלילי.

תוכלו להשתמש במילת המפתח infinite אשר תפעיל את האנימציה שלכם בלופ. כך פועלת ההדגמה "הבהוב" מתחילת השיעור.

animation-direction

.my-element {
    animation-direction: reverse;
}

באמצעות animation-direction, תוכלו להגדיר את הכיוון שבו ציר הזמן יעבור על תמונות המפתח:

• normal: ערך ברירת המחדל, הערך להעברה.
• reverse: פועל לאחור על ציר הזמן שלך.
• alternate: בכל איטרציה של אנימציה, ציר הזמן ירוץ קדימה או אחורה ברצף.
• alternate-reverse: ההיפוך של alternate.

animation-delay

.my-element {
    animation-delay: 5s;
}

המאפיין animation-delay מגדיר את משך ההמתנה לפני שמתחילים את האנימציה. כמו הנכס animation-duration, גם במאפיין הזה אפשר להזין ערך זמן.

בניגוד לנכס animation-duration, אפשר להגדיר אותו כערך שלילי. אם יוגדר ערך שלילי, ציר הזמן ב-@keyframes יתחיל בנקודה הזו. לדוגמה, אם האנימציה היא באורך 10 שניות והגדרתם את הערך animation-delay ל--5s, היא תתחיל ממחצית המרחק בציר הזמן.

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

המאפיין animation-play-state מאפשר להפעיל ולהשהות את האנימציה. ערך ברירת המחדל הוא running, ואם מגדירים אותו ל-paused, האנימציה תושהה.

animation-fill-mode

המאפיין animation-fill-mode מגדיר אילו ערכים בציר הזמן של @keyframes יישמרו לפני שהאנימציה מתחילה או אחרי שהיא מסתיימת. ערך ברירת המחדל הוא none. כלומר, כשהאנימציה מסתיימת, הערכים בציר הזמן נמחקים. יש גם אפשרויות נוספות:

• forwards: פריים המפתח האחרון יישאר, בהתאם לכיוון האנימציה.
• backwards: פריים המפתח הראשון יישמר, בהתאם לכיוון האנימציה.
• both: תואם לכללים של forwards וגם של backwards.

הקיצור של animation

במקום להגדיר את כל המאפיינים בנפרד, אפשר להגדיר אותם בקצרה של animation, וכך להגדיר את מאפייני האנימציה לפי הסדר הבא:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

שיקולים בעת עבודה עם אנימציה

המשתמשים יכולים להגדיר במערכת ההפעלה שהם מעדיפים לצמצם את התנועה בזמן האינטראקציה עם אפליקציות ואתרים. אפשר לזהות את ההעדפה הזו באמצעות שאילתת המדיה prefers-reduced-motion.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

זאת לא בהכרח העדפה לצפייה ללא אנימציה, אלא להפחתת האנימציות — במיוחד אנימציות לא צפויות. אפשר לקבל מידע נוסף על ההעדפה הזו ועל הביצועים הכוללים במדריך האנימציה.

בדיקת ההבנה

בחינת הידע שלכם באנימציות