אנימציות

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

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

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

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

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

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

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

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

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

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

@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> כדי לספק את השם שלכם לדברים. המזהים האלה הם תלויי אותיות רישיות (case-sensitive), ויש מילים שאי אפשר להשתמש בהן. לדוגמה, כשנותנים שמות לשורות ב-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;
}

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

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

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

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

דוגמה לעקומת Bézier.

קשה להבין את עקומות Bézier. כלים חזותיים, כמו המחולל של ליאה ורו, עזר מאוד.

פונקציית ההתאמה לצפייה 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-direction, שמקבל את הערכים הבאים:

• 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;
}

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

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

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

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

דוגמה לאנימציה מופחתת

בדיקת ההבנה

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

האם השם או המזהה המותאם אישית של אנימציה של @keyframes תלויי אותיות רישיות?

כן

🎉

לא

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

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

start,‏ end

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

0%,‏ 100%

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

0 וגם 1

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

animation-timing-function נקרא גם:

תזמון דינמי

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

עיכוב

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

הקלה

🎉

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

1

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

2

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

3

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

4

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