TRANSITIONS
הרבה פעמים במהלך השימוש באתר משתנים לנו ערכי ה CSS.
לדוגמה: במעבר עכבר על פריטי התפריט – משתנה צבע הכתב, או צבע הרקע.
אם לא נגדיר אנימציה – אכן הצבעים ישתנו, אבל השינוי יהיה חד ולא הדרגתי. האנימציה תנפיש את השינוי באופן הדרגתי.
ע"י transitions נגדיר הנפשות לשינויי CSS.
מגדירים את ה transitions בעזרת המאפיינים הבאים:
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property
נוכל להחליט על מאפייני CSS שיונפשו עם כל שינוי שלהם,
לדוגמה: אפשר להגדיר שהאנימציה תשנה את צבע הרקע (background-color) עובי המסגרת (border-width) גודל הכתב (ont-size) וכו' (מצ"ב קובץ עם כל מאפייני ה CSS שאפשר להנפיש אותם).
שורת הקוד הבאה תגדיר ששינוי צבע הרקע (כשיהיה שינוי כזה) יתבצע עם הנפשה:
שורת הקוד הבאה תגדיר שכל שינויי ה CSS שיתבצעו – יהיו עם הנפשה:
בדוגמת הקוד הבאה –
צבע הטסקט משתנה עם מעבר עכבר, והשינוי יהיה הדרגתי (אנימציה).
שימי לב שהאנימציה תתבצע רק אם הגדרת ה CSS הוגדרה מראש.
לדוגמה: כדי שצבע הטקסט בדוגמה הקודמת יתחלף באופן הדרגתי, הייתי חייבת להגדיר מראש שצבע הטקסט הוא שחור – ורק ככה עם מעבר עכבר הצבע השתנה בהדרגתיות לאדום.
אם הייתי משמיטה את שורת הקוד שמגדירה שצבע הטקסט הוא שחור – צבע הטקסט היה אכן שחור – כי זה צבע ברירת המחדל, ובמעבר עכבר הוא אכן היה משתנה לאדום – אבל לא באופן הדרגתי.
transition-duration
משך זמן האנימציה. כמה זמן אנחנו רוצים שהאנימציה תפעל.
את הערך ניתן בשניות (s) או באלפיות השניות (ms).
שורת הקוד הבאה תגדיר שאורך האנימציה הוא חצי שניה:
transition-timing-function
מאפיין זה מגדיר את אחידות קצב האנימציה.
אפשר להגדיר שכל האנימציה תהיה בקצב אחיד. אפשר להגדיר שתתחיל איטית ותגביר בהדרגה את המהירות. אפשר הפוך (שתתחיל במהירות ובהדרגה תאט), וכו'.
ease (ברירת מחדל) – האנימציה מתחילה באיטיות, צוברת תאוצה, ולקראת הסוף מאטה בחזרה.
linear – קצב אחיד לאורך כל האנימציה
ease-in – האנימציה מתחילה באיטיות, ואח"כ צוברת תאוצה ונהיית מהירה יותר.
ease-out – האנימציה מתחילה בקצב מהיר, ואח"כ בהדרגה מאטה.
transition-timing-function:
transition-delay
השהייה. לפעמים אנחנו רוצים שהאנימציה לא תתחיל מייד, אלא לאחר זמן. מאפיין זה מגדיר כמה זמן אנחנו רוצים לחכות לפני שהאנימציה תתחיל.
את כל ארבעת המאפיינים שלמדנו ניתן לכתוב בקיצור בשורת קוד אחת:
ease;
תרגילים:
נסי לכתוב את שורות הקוד שהזכרנו בשיעור הזה (לא בבת אחת כמובן), ובדקתי כל פעם את התוצאה
נסי לשנות את ההגדרות ולהגדיר אנימציות חדשות בעצמך.
טיפ:
ניתן להגדיר מספר transitions – כשלכל אחד הגדרה שונה, נוכל לשלב כאן גם את ה transform שלמדנו בשיעור הקודם.
לדוגמה:
בהצלחה!
