אנימציות ב CSS3

אנימציות ב-100% CSS3

לפני שנתחיל חשוב לציין! – אנימציות ב CSS לא עובדות עד גרסה אקספלורר 9 כולל(רק מגרסה 10 העתידית לצאת בקרוב), ובכל שאר הדפדפנים יש להוסיף לפני קוד הstyle , את ה prefix של הדפדפן. לדוגמא:
דוגמא 1:

דוגמא 2:

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

החוקים של יצירת אנימציה מאוד פשוטים.

  1. יש לנו אלמנט עליו נפעיל את האנימציה.
  2. את האנימציה עצמה שנקרא לה מתוך האלמנט.

אז בואו נתחיל!
ניצור אלמנט div, ניתן לו class בשם box, נוסיף לו קצת עיצוב רוחב+גובה+צבע,נוסיף לו position fixed עם הגדרות מיקום. שנוכל לשחק עם האנימציה במיקום של האלמנט.

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

עכשיו מה שנשאר הוא לחבר את האנימציה בstyles לאלמנט box. ע”י שימוש בstyle, מסוג animation-name שקורא לאנימציה, ועם ה style מסוג animation-duration שיגדיר את משך זמן שהאנימציה תרוץ, יודע לקבל שניות(s) ומיל-שניות(ms).

syntax

syntax מקוצר (אותו הדבר כמו הדוגמא לפני):

זהו! יצרתם את האנימציה הראשונה שלכם! היא תפעל ותרוץ 5 שניות עד שתיפסק.

LIVE DEMO

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

syntax

זהו! יש לנו אנימציה עם 5 נקודת שינו בציר הזמןי, ניתן לעשות כמות בלתי מוגבלת של נקודות בציר הזמן ע”י שימוש באחוזים (אם נגמרים האחוזים אפשר גם אחוזים לא שלמים).
LIVE DEMO

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

  1. מספר חזרות של האנימציה (animation-iteration-count) – ברירת מחדל היא 1, ניתן לתת במקום, כל ספרה, או infinite, כשמו כן הוא,אינסופי. – הכי שימושי, בעיקר מצב אינסופי.
  2. הגדרת delay התחלתי (animation-delay), מהרגע שהאנימציה מתחילה, מקבל יחידות זמן s(שניות) או ms(מילי שניות).
  3. הגדרה מה קורה בסיום ריצה של אנימציה שרצה במספר חזרות (animation-direction) – ניתן להגדיר שבסוף האנימציה היא תעשה את הפעולה שוב מהסוף להתחלה וכך יווצר רצף.
  4. easing מהירות האנימציה (animation-timing-function), התחלה אמצע וסוף, ניתן להגדיר שחלק מסוים באנימציה יפעל מהר יותר.
  5. מצב ריצה של אנימציה (animation-play-state) – ברירת מחדל = אנימציה רצה, ניתן להגדיר שהאנימציה עצורה, ותתחיל לרוץ לדוגמא במעבר עכבר, או להפך (אנימציה רצה ונעצרת במעבר עכבר).

דוגמא שמוסיפה את כל האפשריות הנוספות – LIVE DEMO

פירוט השינויים שבוצעו בדוגמא

  • מספר חזרות אין סופי
  • האנימציה מתחילה אחרי 2 שניות מטעינת הדף
  • בסיום סבב אנימציה , האנימציה עובדת ב reverse.
  • easing – הוחלף לlinear, שעובד במהירות קבועה.
  • מצב ריצה של אנימציה- הוספתי שבמעבר עכבר האנימציה נעצרת.

 

יתרונות וחסרונות של אנימציות ב CSS3

יתרונות:

  • אין צורך ב JS
  • ולכן גם עובד מהר יותר
  • נתמך ברב הדפדפנים החדשים

חסרונות

  • לא עובד באקספלורר עד גרסה 9 כולל (כלומר נמתך רק מגרסה 10 שלא יצאה רישמית)
  • נכון לעכשיו, אנחנו נאלצים לכתוב כל דבר ב 4 צורות שונות, על מנת לתמוך בכל הדפדפנים התומכים. ניתן ליצור כתיבה נכונה ע”י שימוש ב less.

כתיב מקוצר ושימוש ב less, על מנת למנוע שכפול קוד: 

1. ראשית ניתן לקצר ולשרשר את הגדרות האנימציה בשורה אחת.
syntax

2. וע”י זה ניתן להעביר את כל הפרמטרים בפונקציה וע”י כך להימנע משכפול קוד.
syntax

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

מה שנוצר בסוף, היא פונקציה אנימציה שמפעילה את ה keyframe (ומגדירה הגדרות נוספות של אנימציה).
ה keyframe, בעקבות הצורת של כתיבה שלכל דפדפן מצריך כתיבה שונה, קורא לפונקציה שתגדיר את כל ה keyframes של האנימציה.

הנה דוגמת קוד – LIVE DEMO

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

נכתב ע”י: אלעד שכטר

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">