ב-2012, גוגל ניסחה את עקרון "60fps or bust" - ממשק שרץ בפחות מ-60 frames לשנייה מרגיש איטי, גמגמני, זול. לא עניין של aesthetics - מחקר שגוגל פרסמה מצא שעיכוב של 100ms בתגובה לאינטראקציה מוריד conversion rates בי-7%. אנימציה שגורמת לדפדפן לחשב layout מחדש בכל frame - כי מישהו animate את width או margin - רצה בקלות ב-20fps ומרגישה שבורה.
CSS Animations ו-Transitions הן לא sugar coating על אפליקציה. הן חלק מה-performance story שלה. ולדעת אילו properties מותרות לאנימציה, למה, ואיך - זו בדיוק ההבנה שמבדילה בין Junior שמוסיף אנימציות כי "נראה יפה" לבין מפתח שמוסיף אנימציות שעובדות.
Smooth animation target
16.7ms per frame - anything heavier feels janky
Drop in conversions per 100ms delay
Google research on interaction latency