בקרוב תהיה תמיכה באנימציות ב-CSS שמופעלות בגלילה

Bramus

תאריך פרסום: 12 בדצמבר 2025

בשנת 2023 השקנו אנימציות מבוססות-גלילה שמאפשרות להריץ קדימה (או אחורה) אנימציה באמצעות גלילה. באנימציות מבוססות-גלילה, התקדמות האנימציה משתנה מ-0% ל-100% כשגוללים. אם מפסיקים לגלול, האנימציה מושהית. אם גוללים חזרה למעלה, האנימציה מתהפכת.

הפרק הבא באנימציות מבוססות גלילה יגיע בשנת 2026, עם אנימציות שמופעלות בגלילה ב-Chrome 145. אלה אנימציות שמבוססות על זמן ומופעלות כשמגיעים להיסט גלילה ספציפי.

אפשר להיפרד מ-IntersectionObserver בשביל האפקט הזה, כי עכשיו אפשר להגדיר אותו ב-CSS.

טריגרים של ציר זמן, טריגרים של אנימציה ופעולות

הפעלת אנימציה

כדי להגדיר אנימציה שמופעלת בגלילה ב-CSS, מתחילים באנימציית CSS רגילה שמצורפת לאלמנט:

animation: unclip 0.35s ease-in-out both;

האנימציה הזו מופעלת על ידי DocumentTimeline ונמשכת 0.35 שניות. האנימציה מופעלת אוטומטית אחרי טעינת הדף. כדי לשנות את הטריגר, משתמשים במאפיין ה-CSS החדש animation-trigger:

animation-trigger: --t play-forwards play-backwards;

במקרה הזה, האנימציה מוגדרת להפעלה על ידי הטריגר --t. כשהטריגר הזה מופעל, הפעולה play-forwards מופעלת באנימציה, וכשהטריגר מושבת, הפעולה play-backwards מופעלת.

הרשימה המלאה של הפעולות מופיעה במפרט.

יצירת טריגר

אבל מהו הטריגר --t? זה טריגר בשם --t. באנימציות שמופעלות בגלילה, מדובר ב'טריגר של ציר זמן' שמשתמש בציר זמן של התקדמות הגלילה או בציר זמן של התקדמות הצפייה כמקור.

כדי להגדיר טריגר של ציר זמן, משתמשים במאפיין timeline-trigger (או בגרסאות המפורטות שלו). לדוגמה, כדי ליצור טריגר בשם --t שמשתמש בציר זמן של תצוגה כמקור, משתמשים בפקודה הבאה:

timeline-trigger-name: --t;
timeline-trigger-source: view();

הטריגר שנוצר --t מופעל ומושבת על סמך ציר הזמן של התצוגה שמשויך לרכיב התואם. מכיוון שטווח ברירת המחדל של ציר זמן של תצוגה הוא הטווח cover, הטריגר מופעל ומושבת גם כשהוא בתוך הטווח הזה או מחוצה לו.

שינוי הטווחים של הביטוי להפעלה

כדי לשנות את המיקומים שבהם הטריגר צריך להיות פעיל או לא פעיל, מציינים את טווחי ההפעלה והפעילות בטריגר. בדוגמה הבאה, טווח ההפעלה מוגדר ל-entry 100% exit 0%, כלומר הטריגר יופעל כשהנושא יהיה בטווח הזה.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

מכיוון שלא צוין טווח פעיל בקטע הקוד הקודם, טווח ההפעלה משמש גם כטווח הפעיל. אם יוצאים מהטווח הפעיל הזה, הטריגר מושבת.

בשילוב עם animation-trigger שהוגדר כבר, התוצאה הוויזואלית היא שהאנימציה מופעלת קדימה כשהאובייקט נכנס במלואו לאזור הגלילה, והאנימציה מופעלת אחורה כשהאובייקט עומד לצאת מאזור הגלילה.

יכול להיות שיהיו טווחי הפעלה וטווחי פעילות שונים. לדוגמה:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

במקרה הזה, הטריגר מופעל כשהנושא נמצא בטווח entry 100% exit 0%. הטריגר יישאר פעיל עד שהוא ייצא מהטווח entry 0% exit 100%.

התוצאה היא שהאנימציה תופעל קדימה כשהמצולם ייכנס לאזור הגלילה, ובניגוד למצב הקודם, היא תמשיך לפעול עד שהמצולם ייצא לגמרי מאזור הגלילה.

הגבלת ההיקף של טריגר

הטריגרים גלויים באופן גלובלי, כלומר ההתאמה האחרונה שמצהירה על טריגר עם שם מסוים היא זו ש "מנצחת". כדי להגביל את החשיפה של טריגר, משתמשים במאפיין trigger-scope. השימוש ב-anchor-scope דומה.

trigger-scope: --t; /* List of dashed idents, or `all` */

אם יש לכם כלל CSS שמצהיר על טריגר ומתאים לכמה אלמנטים, תצטרכו להשתמש ב-trigger-scope.

הדגמה (דמו)

בהדגמה הבאה, טופס מחולק לקטעים שונים בגובה מלא. כשחלק מהטופס נכנס לתצוגה, הוא מונפש באמצעות אנימציה שמופעלת בגלילה. כשיוצאים מתיבת הגלילה, האנימציה נעלמת.

הלוגיקה של האנימציה שמופעלת בגלילה היא:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

אם מנתחים את הקוד, אפשר לראות שהוא כולל את הרכיבים הבאים:

• השם של timeline-trigger הוא --t, וקבוצת המקורות שלו מוגדרת לציר זמן של תצוגה שמתעד את הרכיב התואם.
• טווח ההפעלה של הטריגר הוא contain 15% contain 85%. כשהנושא נמצא בטווח הזה, הטריגר הופך לפעיל.
• כשהטריגר מופעל, הוא נשאר פעיל כל עוד הנושא נמצא בטווח הפעיל של entry 100% exit 0%.
• האנימציה unclip מצורפת לרכיב.
• האנימציה מוגדרת לשימוש ב---t כמקור הטריגר שלה. כשהטריגר הופך לפעיל, האנימציה מתחילה לפעול בכיוון קדימה.
• כשהטריגר מושבת – מה שקורה כשהאדם יוצא מהטווח הפעיל – האנימציה מוצגת הפוך.
• גם התוכן של הכרטיס מונפש פנימה והחוצה באמצעות אותו טריגר --t.

הדוגמה כוללת חזרה לשימוש ב-IntersectionObserver בדפדפנים שלא תומכים ב-timeline-trigger.

סמל האפשרויות הנוספות הדגמות

אם אתם רוצים לראות עוד דוגמאות לאנימציות שמופעלות בגלילה, כדאי לעיין בהדגמות הבאות:

• Fly-in Text
• פוגשים את המפלצות (scrollytelling)
• צורה סגורה משתנה

משוב

נשמח לקבל משוב כדי להמשיך לשפר את התכונה הזו. כדי לשלוח משוב, אפשר לפנות אלינו במדיה החברתית או לדווח על בעיה בקבוצת העבודה של CSS.

אם נתקלתם בבאג, דווחו על באג ב-Chromium כדי לעדכן אותנו. רשימת באגים מוכרים: אפשר לעיין בכלי למעקב אחרי באגים של Chromium.