אנימציות

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

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

סמלים מהבהבים הם אחת הדרכים לוודא שהמשתמשים שמים לב למידע חשוב.

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

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

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

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

מצבי האנימציה המהבהבים.

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

אנימציה מהבהבת עם תמונות מפתח.

@keyframes

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

CSS @keyframes מבוסס על אותו קונספט של תמונות מפתח של אנימציה.

הנה דוגמה עם שני מצבים:

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

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

הערה: במספר מקומות ב-CSS משתמשים ב-<custom-ident> כדי לתת שם משלכם לדברים. המזהים האלה הם תלויי אותיות רישיות, ובמקרים מסוימים יש מילים שאי אפשר להשתמש בהן. לדוגמה, כשנותנים שמות לשורות ברשת CSS, לא ניתן להשתמש במילה span.

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

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

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

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

אפשר לנסות לערוך את הכלל pulse כדי לראות איך האנימציה משתנה.

המאפיינים של animation

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

animation-duration

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

animation-timing-function

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

כדי ליצור מחדש תנועה טבעית באנימציה, אפשר להשתמש בפונקציות תזמון שמחשבות את המהירות של אנימציה בכל נקודה. ערכים מחושבים הם בדרך כלל קעורים, מה שגורם לאנימציה לרוץ במהירויות משתנות במהלך 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);
}

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

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

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

animation-iteration-count

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

כדאי לנסות לשנות את מספר החזרות של האנימציה הזו.

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

האנימציה המהבהבה משתנה ללא הגבלה.

animation-direction

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

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

אפשר לנסות לשנות את כיוון האנימציה.

animation-delay

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

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

אפשר לנסות לשנות את ההשהיה באנימציה.

animation-play-state

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

מצמידים את הסמן מעל לאלמנט המונפש כדי להשהות את האנימציה.

animation-fill-mode

תמיכה בדפדפן

• 43
• 12
• ‏16
• 9

מקור

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

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

כדאי לנסות לשנות את מצב המילוי.

הקיצור של 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 תלויי אותיות רישיות?

כן

🎉

לא

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

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

start,‏ end

כדאי לנסות שוב.

0%,‏ 100%

from זהה לערך 0% וto זהה ל-100%.

0 וגם 1

כדאי לנסות שוב.

animation-timing-function ידוע גם בשם:

תזמון דינמי

כדאי לנסות שוב.

עיכוב

כדאי לנסות שוב.

הקלה

🎉

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

1

הדפדפן יקבל את המצב הנוכחי של הרכיב כתמונת מפתח, לכן יש צורך בתמונת מפתח אחת לפחות.

2

כדאי לנסות שוב.

3

כדאי לנסות שוב.

4

כדאי לנסות שוב.