אנימציות

The CSS Podcast – 022: Animation

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

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

מהו פריים מפתח?

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

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

המצבים של אנימציית הפולסר במסגרת הזמן של שנייה אחת

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

אותו תרשים כמו קודם, אבל הפעם עם מפתחות מפתח

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

@keyframes מבוסס על אותו עיקרון כמו keyframes של אנימציה.

דוגמה עם שתי סטטוסים:

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

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

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

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

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

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

המאפיינים animation

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

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

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

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

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

פונקציית ביז'ואר בתרשים של התקדמות מול זמן

קשה להבין את עקומות הבייזייה. כלים חזותיים, כמו הגנרטור הזה של Lea Verou, יכולים לעזור מאוד.

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

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

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

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

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

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

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

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

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

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

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

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

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

הקיצורה 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;
  }
}

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

בדיקת ההבנה

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

האם השם או המזהה המותאם אישית של אנימציה @keyframes תלוי אותיות רישיות (case-sensitive)?

כן
🎉
לא
ב-CSS אסור לשתי אנימציות להיות עם אותו שם, אבל אפשר להשתמש ב-SWOOP וב-swoop בו-זמנית.

מילות המפתח from ו-to זהות ל:

start,‏ end
כדאי לנסות שוב.
0%,‏ 100%
הערך של from זהה לערך של 0% והערך של to זהה לערך של 100%.
0 וגם 1
כדאי לנסות שוב.

השדה animation-timing-function ידוע גם בשמות הבאים:

תזמון דינמי
כדאי לנסות שוב.
עיכוב
כדאי לנסות שוב.
הקלה
🎉

מהו המספר המינימלי של נקודות מפתח שנדרשות באנימציה מסוג @keyframes?

1
הדפדפן יתייחס למצב הנוכחי של הרכיב כתמונה מפתח, לכן נדרשת לפחות תמונה מפתח אחת.
2
כדאי לנסות שוב.
3
כדאי לנסות שוב.
4
כדאי לנסות שוב.