אנימציות מבוססות גלילה בקלות: הכירו את animation-timeline

כולנו אוהבים לשוטט באתרים עם אנימציות למגניבים. שהפופולארית שבהם היא אנימציה שמופעלת על ידי גלילה, ומושפעת על ידי התקדמות קדימה ואחורה. שמפעילה בתורה מופע סוחף של אלמנטים שיוצאים ונכנסים בצעדי בלרינה קלילים. 😍 כמובן חווית המשתמש הופכת לחלקה ונעימה שמרגישה כמו הליכה בפארק אביבי עם פרפרים וסנאים חמודים ולהקת רוק רך שצורחת את נשמתה ברקע בהילוך איטי, חווית המתכנת? הליכה בתוך מסור חשמלי שעושה הורדות ידים עם מכסחת דשא 🐔. אז בדרך כלל: נתחיל מהבייסיק: חיפוש בגוגל על מונחים כמו : "אנימציה" , "מיקום אלמנט", "סיבוב על ציר הx", "למה זה לא עובד" וכמובן "הקו החם למתאבד" ו"איך מתקנים מסך סדוק". ואז צריך לדאוג לכתיבה הגיונית שיהיה אפשר לתחזק גם אחרי שהמעצב ילך להשתלמות "מבוא לאנימציות וקסמים לא מציאותיים". ☹ הפתרון הקסום לעצלנים : animation-timeline יש את האופציה הנחמדה שנקראת animation-timeline שקושרת את התקדמות האנימציה לאירוע כלשהו - במקרה שלנו הופעת האלמנט. החיסרון: 👎 תמיכה מוגבלת בדפדפנים אז אם הלקוחות שלכם רק עם Chrome וEdge זכיתם!