המאפיין animation-timeline מציין את ציר הזמן המשמש לשליטה בהתקדמות של הנפשה.
ציר הזמן יכול להיות מסופק על ידי המיקום הנוכחי בסרגל גלילה, ובמקרה זה מכונה ציר זמן של סרגל גלילה. ניתן לציין את האלמנט המספק את ציר הזמן של סרגל הגלילה בשתי דרכים:
ציר זמן גלילה עם שם הוא ציר שבו הרכיב שיספק את ציר הזמן של סרגל הגלילה נקרא במפורש, על ידי החלת המאפיין scroll-timeline-name (או מאפיין הקיצור scroll-timeline). לאחר מכן השם משויך לאלמנט להנפשה באמצעות המאפיין animation-timeline.
ציר זמן גלילה אנונימי מוגדר באמצעות הסימון הפונקציונלי scroll(), המציין שהאלמנט המספק את ציר הזמן של הגלילה הוא אב קדמון של האלמנט שיש להנפשה. ניתן להגדיר את האב הקדמון כאלמנט השורש או כאב הקדמון הקרוב ביותר שיש לו פס גלילה בכל אחד מהצירים.
ניתן גם לציין אם סרגל הגלילה משתמש בסרגל גלילה בחלק העליון/התחתון או משמאל/ימין של האלמנט. אם לציר שנבחר אין פס גלילה, ציר הזמן של ההנפשה המשויך לא יהיה פעיל.
ניתן להגדיר את ציר הזמן של האנימציה גם באמצעות מאפיין הקיצור של האנימציה
דוגמא: שליטה בציר הזמן המניע אנימציה (כגון מיקום גלילה)
| הערך שנבדק | Chrome | Firefox | EdgeC | Opera |
|---|---|---|---|---|
| none | ✔️ | ❌ | ✔️ | ✔️ |
| auto | ✔️ | ❌ | ✔️ | ✔️ |
| revert | ✔️ | ❌ | ✔️ | ✔️ |
| revert-layer | ✔️ | ❌ | ✔️ | ✔️ |
| unset | ✔️ | ❌ | ✔️ | ✔️ |
| inherit | ✔️ | ❌ | ✔️ | ✔️ |
| initial | ✔️ | ❌ | ✔️ | ✔️ |