אנימציה היא דרך נהדרת להדגיש אלמנטים אינטראקטיביים, ולהוסיף עניין וכיפי לעיצובים. ביחידה הזו נסביר איך להוסיף אפקטים של אנימציה ולשלוט בהם באמצעות CSS.
לפעמים אפשר לראות ממשקים עוזרים עם מידע מועיל על הקטע שבו הם נמצאים, כשלוחצים עליהם. לרוב, האנימציות האלה כוללות אנימציה מהבהבת כדי ליידע אתכם באופן עדין שהמידע נמצא וצריך לקיים איתו אינטראקציה. ביחידה הזו נסביר איך ליצור את המסייעים האלה ואנימציות אחרות באמצעות CSS.
אתם יכולים להשתמש ב-CSS כדי להגדיר רצף אנימציה עם תמונות מפתח. הרצפים האלה יכולים להיות אנימציות בסיסיות עם מצב אחד או רצפים מורכבים מבוססי זמן.
מהי תמונת מפתח?
ברוב כלי האנימציה, תמונות מפתח הן המנגנון שבו משתמשים כדי להקצות מצבי אנימציה לחותמות זמן בציר זמן.
לדוגמה, זהו ציר הזמן של נקודה 'עזר' המהבהבה. האנימציה רצה במשך שנייה אחת ויש לה שני מצבים.
יש נקודה ספציפית שבה כל אחד ממצבי האנימציה האלה מתחיל ומסתיים. אתם יכולים למפות אותם על ציר הזמן באמצעות תמונות מפתח.
@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;
}
הערכים של פונקציית ההקלות נראית עקומה כי ההקלות מחושבת באמצעות עקומת בזייה, סוג של פונקציה שמשמשת ליצירת מודל המהירות. כל אחת ממילות המפתח של פונקציית התזמון, כמו 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
.my-element {
animation-iteration-count: 10;
}
המאפיין animation-iteration-count מגדיר כמה פעמים ציר הזמן @keyframes
יפעל במהלך האנימציה. כברירת מחדל, הערך הוא 1, כלומר האנימציה מפסיקה כשהיא מגיעה לסוף ציר הזמן. הערך לא יכול להיות מספר שלילי.
כדי ליצור את לולאת האנימציה, צריך להגדיר את ספירת האיטרציה ל-infinite
. כך פועלת האנימציה המהבהבה של תחילת השיעור.
animation-direction
.my-element {
animation-direction: reverse;
}
אפשר להגדיר את הכיוון שבו ציר הזמן עובר בתמונות המפתח באמצעות animation-כיוון, עם הערכים הבאים:
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;
}
שיקולים בעת עבודה עם אנימציה
המשתמשים יכולים להגדיר את מערכת ההפעלה שלהם להעדיף תנועה מופחתת במהלך אינטראקציה עם אפליקציות ואתרים. אפשר לזהות את ההעדפה הזו באמצעות שאילתת המדיה prefers-reduced-motion:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
זו לא בהכרח העדפה להימנע מאנימציה. זו העדפה למספר קטן יותר של אנימציה, במיוחד אנימציה פחות בלתי צפויה. למידע נוסף על ההעדפה הזו ועל הביצועים הכוללים, אפשר לעיין במדריך לאנימציה.
בחינת ההבנה
בחינת הידע שלך לגבי אנימציות
האם השם או המזהה המותאם אישית של אנימציה @keyframes
תלויי אותיות רישיות?
SWOOP
ול-swoop
להתקיים בו-זמנית.מילות המפתח from
ו-to
זהות:
start
, end
0%
, 100%
from
זהה לערך 0%
וto
זהה ל-100%.0
וגם 1
animation-timing-function
ידוע גם בשם:
מהו המספר המינימלי של תמונות מפתח באנימציה של @keyframes
?