מי שכבר מכיר CSS בטח יודע על מה הפוסט הזה מדבר שמדובר על אנימציות ב CSS. הפוסט הזה ועוד רבים אחריו יציגו הסברים על שימוש באנימציות באתרים שאתם בונים. למה להשתמש באנימציות באתר? התשובה היא פשוטה, כי זה משפר את חווית המשתמש! . אחד הדברים החשובים שכבר דיברנו עליהם בפוסטים קודמים הוא דגש על חווית משתמש. כמה דגשים חשובים לפני שנתחיל:
- שימוש מתון באנימציות - הכי מגניב זה לראות את האתר מגיב באנימציה. אבל למרות ההתלהבות שבאלמנטים זזים, צריך לשמות על שפיות ולא להגזים עם האנימציות. אנחנו לא רוצים לפגוע בשמישות של האתר אלא רק לשפר את החוויה מבלי לפגוע במטרה..
- מה עושים עם הדפדפנים השונים - דפדפנים שונים עושים לנו חיים קשים. ישנם דפדפנים שלא תומכים במאפיינים של CSS3 (אנימציות ועוד..). דבר ראשון נבדוק מיהם הדפדפנים הללו. להלן רשימה של הדפדפנים שתומכים. שימו לב לגרסאות השונות (למשל מתחת לאקספלורר 10 אין תמיכה בשום מאפיין של אנימציה). מה עושים אם הלקוח שלכם מתעקש שהדברים יעברו גם בגרסאות של דפדפנים שלא תומכים? אפשר לפנות את זה ב javascript. אבל זה כבר שיעור אחר.
- אנימצאיות במובייל - גם במובייל יש דפדפנים שצריך לוודא כי הם תומכים באנימציות. להלן הרשימה של הגרסאות של הדפדפנים שתומכים.
חוץ מזה חשוב לזכור כי אין במובייל מעבר עכבר!(hover). לכן, אם באתר המותאם למחשב עשיתם אנימציות במעבר עכבר, הם לא יעבדו במובייל. מומלץ לשנות אותם שיעבדו בנגיעה . יפורט בהמשך הפוסט.
בסיס העבודה עם אנימציות בCSS
ברגע שנרצה לעשות שימוש באנימציות ב-CSS נצטרך להשתמש החוקיות חדשה והיא: keyframes@
חוקיות זו מאפשרת לנו לבנות סכמה של סטייל חדש הנבנה לפי פריימים (זמן) ולמעשה ככה הדפדפן יודע להגיב לתגיות האנימציה והסטייל שנבחר להשתמש.
אנימציית שינוי צבע
איך אפשר לשנות את הצבע של רקע באנימציה? משימה פשוטה. להלן דוגמה של הקוד ליצירת צבע מתחלף של רקע:
וכך נראית התוצאה:
יש לך מה להגיד? אשמח לתגובה