Już wkrótce pojawią się animacje CSS wywoływane przez przewijanie.

Bramus

Data publikacji: 12 grudnia 2025 r.

W 2023 r. wprowadziliśmy animacje sterowane przewijaniem, które umożliwiają przewijanie animacji do przodu lub do tyłu. W przypadku animacji sterowanych przewijaniem postęp animacji zwiększa się od 0% do 100% w miarę przewijania. Jeśli przestaniesz przewijać, animacja się zatrzyma. Jeśli przewiniesz z powrotem w górę, animacja zostanie odtworzona w odwrotnej kolejności.

Kolejny rozdział animacji opartych na przewijaniu pojawi się w 2026 r. Animacje wywoływane przewijaniem zostaną wprowadzone w Chrome 145. Są to animacje oparte na czasie, które są wywoływane po przekroczeniu określonego przesunięcia przewijania.

Pożegnaj IntersectionObserver w przypadku tego typu efektu, ponieważ możesz teraz zadeklarować go w CSS.

Reguły osi czasu, reguły animacji i działania

Uruchamianie animacji

Aby skonfigurować animację wywoływaną przez przewijanie w CSS, zacznij od zwykłej animacji CSS dołączonej do elementu:

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

Ta animacja używa DocumentTimeline jako sterownika i trwa 0,35 sekundy. Animacja jest uruchamiana automatycznie po załadowaniu strony. Aby zmienić wyzwalacz, użyj nowej właściwości CSS animation-trigger:

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

Animacja jest tu ustawiona tak, aby była wywoływana przez regułę --t. Gdy ten wyzwalacz zostanie aktywowany, w animacji zostanie wywołane działanie play-forwards, a gdy zostanie zdezaktywowany, wywołane zostanie działanie play-backwards.

Specyfikacja zawiera pełną listę działań.

Utwórz aktywator

Ale czym jest ten wyzwalacz --t? Jest to aktywator o nazwie --t. W przypadku animacji wywoływanych przez przewijanie jest to „wyzwalacz osi czasu”, który jako źródło wykorzystuje oś czasu postępu przewijania lub oś czasu postępu wyświetlania.

Aby zdefiniować wyzwalacz osi czasu, użyj właściwości timeline-trigger (lub powiązanych z nią właściwości długich). Aby na przykład utworzyć aktywator o nazwie --t, który korzysta z osi czasu wyświetlenia jako źródła, użyj tego polecenia:

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

Utworzony w ten sposób wyzwalacz --t aktywuje się i dezaktywuje na podstawie osi czasu wyświetlania powiązanej z pasującym elementem. Domyślny zakres osi czasu widoku to zakres cover, więc wyzwalacz aktywuje się i dezaktywuje w tym zakresie i poza nim.

Dostosowywanie zakresów aktywatora

Aby dostosować pozycje, przy których reguła ma być aktywna lub nieaktywna, określ zakresy aktywacji i aktywności reguły. W poniższym przykładzie zakres aktywacji jest ustawiony na entry 100% exit 0%, co oznacza, że reguła zostanie aktywowana, gdy obiekt znajdzie się w tym zakresie.

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

Ponieważ w poprzednim fragmencie kodu nie określono aktywnego zakresu, zakres aktywacji jest też używany jako aktywny zakres. Gdy znajdziesz się poza tym aktywnym zakresem, reguła zostanie dezaktywowana.

W połączeniu z wcześniej zdefiniowanym parametrem animation-trigger powoduje to, że animacja jest odtwarzana do przodu, gdy element w pełni znajdzie się w obszarze przewijania, a do tyłu, gdy będzie się z niego wycofywać.

Możesz mieć różne zakresy aktywacji i aktywności. Na przykład:

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

W tym przypadku reguła aktywuje się, gdy temat znajduje się w zakresie entry 100% exit 0%. Wywołanie pozostaje aktywne, dopóki nie wyjdzie poza zakres entry 0% exit 100%.

W efekcie animacja będzie odtwarzana do przodu, gdy osoba wejdzie w obszar przewijania, i w przeciwieństwie do poprzedniej wersji pozostanie aktywna, dopóki osoba nie opuści w pełni obszaru przewijania.

Ograniczanie zakresu aktywatora

Aktywatory są widoczne globalnie, co oznacza, że ostatnie dopasowanie, które deklaruje aktywator o określonej nazwie, „wygrywa”. Aby ograniczyć widoczność wyzwalacza, użyj właściwości trigger-scope. Działa to podobnie do anchor-scope.

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

Jeśli masz regułę CSS, która deklaruje wyzwalacz i pasuje do wielu elementów, musisz użyć trigger-scope.

Prezentacja

W poniższym przykładzie formularz jest podzielony na kilka sekcji o pełnej wysokości. Gdy poszczególne części formularza pojawiają się w widoku, są animowane za pomocą animacji wyzwalanej przez przewijanie. Gdy opuścisz obszar przewijania, animacja zniknie.

Logika animacji wyzwalanej przez przewijanie jest następująca:

@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;
}

Po rozłożeniu kod wygląda tak:

• timeline-trigger ma nazwę --t, a jego źródło jest ustawione na oś czasu widoku, która śledzi pasujący element.
• Zakres aktywacji reguły to contain 15% contain 85%. Gdy obiekt znajdzie się w tym zakresie, reguła zostanie aktywowana.
• Po aktywowaniu wyzwalacz pozostaje aktywny tak długo, jak długo obiekt znajduje się w aktywnym zakresie entry 100% exit 0%.
• Animacja unclip jest dołączona do elementu.
• Animacja jest skonfigurowana tak, aby jako źródło aktywatora używać --t. Gdy reguła stanie się aktywna, animacja zacznie się odtwarzać do przodu.
• Gdy wyzwalacz zostanie dezaktywowany (co następuje, gdy osoba opuści aktywny zakres), animacja odtwarza się wstecz.
• Zawartość karty również pojawia się i znika przy użyciu tego samego wyzwalacza --t.

Przykład zawiera rezerwę za pomocą IntersectionObserver dla przeglądarek, które nie obsługują timeline-trigger.

Więcej wersji demonstracyjnych

Jeśli lubisz animacje wywoływane przewijaniem, zapoznaj się z tymi wersjami demonstracyjnymi:

• Tekst wjeżdżający
• Poznaj potwory (scrollytelling)
• Zmieniający się kształt

Prześlij opinię

Chętnie poznamy Twoją opinię, aby ulepszać tę funkcję. Aby przesłać opinię, skontaktuj się z nami w mediach społecznościowych lub zgłoś problem w grupie roboczej CSS.

Jeśli napotkasz błąd, zgłoś go w Chromium. Lista znanych błędów: zobacz narzędzie do śledzenia błędów w Chromium.