אנימציות ב-CSS3 אפשר ליצור ע"י שימוש ב-transitions או animations. האנימציה מוגדרת ע"י שינוי ערך של property בצורה הדרגתית. למשל אתם יכולים לשנות צבע לאט לאט מצהוב לאדום, או להזיז אלמנט ממקום מסויים למקום אחר. ה-CSS עושה את זה בשבילכם אוטומטית, אתם רק צריכים להגדיר לו מה לעשות. קחו בחשבון שIE9 ופחות לא תומכים לא ב-animations ולא ב-transitions.

ההבדל ביניהם הוא שהאפקט של אלמנט שיש לו animation מופעל ברגע שהאלמנט נוצר, והאפקט של אלמנט שיש לו transition מופעל ברגע שה-property שעליו פועל ה-transition משתנה. אז למשל אם הגדרתם transition על רוחב של אלמנט מסויים, ברגע שתשנו לו את הרוחב (דרך ה-JS או דרך ה-CSS), הוא יעשה את זה עם אפקט בצורה הדרגתית.

אני ספציפית השתמשתי ב-transitions שנשלטים ע"י ה-JS בהתאם ל-scroll. ברגע שהמשתמש גולל, פונקציה שיצרתי בשם handleScroll נקראת (הכוונה שפונקציה אחרת קוראת לה). ה-handleScroll קוראת לפונקציות initTransitions ו-startTransitions, שמחליטות אם לאפס או להתחיל (אם בכלל) כל אחד מה-transitions, בהתאם לאלמנטים שכרגע נמצאים בשדה הראיה (viewport) ובהתאם לכיוון הגלילה (כל זאת ע"י שימוש בפונקציות אחרות שיצרתי שעושות את הבדיקות האלה). האיפוס וההתחלה של ה-transitions נעשו בדר"כ ע"י הסרה או הוספה של CSS class שהוגדרה מבעוד מועד, המכילה חוקים ל-properties שאני רוצה שישתנו. האלמנטים שעליהם אני רוצה להפעיל את ה-transition מקבלים את ה-class הזה ב-HTML.

ה-transitions שלי היו על properties כמו transform: scale, right, opacity.