אנימציה היא דרך נהדרת להדגיש אלמנטים אינטראקטיביים ולהוסיף להם עניין וכיף בעיצובים שלכם. במודול הזה נלמד איך להוסיף ולנהל אפקטי אנימציה בעזרת CSS.
לפעמים תראו עוזרים בממשקים שמספקים מידע מועיל מידע על הקטע שבו הם נמצאים כשלוחצים עליהם. בדרך כלל, אנימציה מהבהבת כדי להודיע לכם שהמידע קיים צריך להיות בקשר איתן. יחידת הלימוד הזו מראה איך ליצור את העוזרים האלה ואנימציות אחרות, באמצעות שירות CSS.
אפשר להשתמש ב-CSS כדי להגדיר רצף אנימציה עם תמונות מפתח. הרצפים האלה יכולות להיות אנימציות בסיסיות בעלות מצב אחד, או רצפים מורכבים ומבוססי זמן.
מהי תמונת מפתח?
ברוב כלי האנימציה, תמונות מפתח הן המנגנון שבו משתמשים כדי להקצות אנימציה לחותמות זמן בציר הזמן.
לדוגמה, הנה ציר זמן של המילה 'עוזר' המהבהב נקודה. האנימציה רצה למשך שנייה אחת, ויש בו 2 מצבים.
יש נקודה ספציפית שבה כל אחד ממצבי האנימציה האלה מתחיל ומסתיים. אתם ממפים אותם על ציר הזמן באמצעות תמונות מפתח.
@keyframes
שירות CSS @keyframes
מבוססות על אותו קונספט כמו תמונות מפתח באנימציה.
הנה דוגמה עם שני מצבים:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
החלק הראשון החשוב הוא
מזהה מותאם אישית (custom-ident
),
השם של כלל תמונות המפתח. המזהה בדוגמה הזו הוא my-animation
.
המזהה המותאם אישית פועל כמו שם של פונקציה,
היא מאפשרת להפנות לכלל תמונות המפתח במקומות אחרים בקוד ה-CSS.
בתוך כלל תמונות המפתח, 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;
}
}
נכסי 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;
}
הקלות בערכי פונקציות נראית עקומה כי ההתאמה מחושבת באמצעות
עקומת 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. כלים חזותיים, כמו המחולל של ליאה ורו, עזר מאוד.
פונקציית ההתאמה לצפייה steps
לפעמים רוצים להשיג שליטה מפורטת יותר באנימציה,
נעים במרווחים במקום לאורך עקומה. פונקציית ההתאמה לצפייה steps()
מאפשרת
מפצלים את ציר הזמן לפרקי זמן מוגדרים של משך זמן שווה.
.my-element {
animation-timing-function: steps(10, end);
}
הארגומנט הראשון הוא שלבי המספר. אם יש אותו מספר תמונות מפתח כשלבים, כשכל תמונות מפתח מופעלות ברצף למשך את השלב שלו, ללא מעבר בין מדינות. אם יש פחות תמונות מפתח מאשר שלבים, הדפדפן יוסיף שלבים בין תמונות מפתח בהתאם לארגומנט השני.
הארגומנט השני הוא הכיוון. אם הוא מוגדר לערך 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
, אפשר להגדיר את animation-delay
כשלילי
שגורם לאנימציה להתחיל בנקודה המתאימה
בציר הזמן. לדוגמה, אם האנימציה היא 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
: תמונת המפתח הראשונה והאחרונה נשמרות.
הקיצור של animation
במקום להגדיר כל נכס בנפרד, אפשר להגדיר אותם
קיצור דרך של animation
, שמאפשר להגדיר את מאפייני האנימציה
הסדר הבא:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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
תלויי אותיות רישיות?
מילות המפתח from
ו-to
זהות לאלה:
0
וגם 1
start
, end
0%
, 100%
animation-timing-function
נקרא גם:
מה המספר המינימלי של תמונות מפתח שנדרש בתוך אנימציה מסוג @keyframes
?