Geçiş animasyonları

View transition için özel animasyon öğrenirsin.

@keyframes ile özel geçiş

Varsayılan çapraz çözülme yerine kendi animasyonunu yazabilirsin. Bunun için önce @keyframes ile animasyon karelerini tanımlarsın: from { opacity: 1 } başlangıç, to { opacity: 0 } bitiş karesidir.

Sonra bu kareleri bir geçiş pseudo-elementine animation özelliği ile bağlarsın. Örneğin ::view-transition-old(root) için animation: fade-out 0.4s forwards yazınca eski görüntü 0.4 saniyede silinir.

Eski ve yeni için ayrı animasyon

Eski ve yeni görüntü için ayrı animasyon yazmak istersen, ::view-transition-old(root) ve ::view-transition-new(root) seçicilerine animation bildirimi verebilirsin.

Örneğin eski görüntü dışarı kayarken yeni görüntü içeride belirebilir. Eski görüntüye animation: slide-out 0.4s forwards, yeni görüntüye animation: slide-in 0.4s forwards yazarsan; her biri kendi @keyframes kümesine bağlanır.

Uygulama Eski görüntüye fade-out animasyonu bağla

İki bölüm yaz. Birincisi @keyframes fade-out olsun; from { opacity: 1 } ve to { opacity: 0 } karelerini içersin. İkincisi ::view-transition-old(root) seçicisi olsun; blokta animation: fade-out 0.4s forwards bildirimi bulunsun.

Örnek çözümü göster

/* kök eski görüntü için silinme animasyonu */
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
::view-transition-old(root) {
  animation: fade-out 0.4s forwards;
}

Kendini test et

Bir @keyframes kümesini ::view-transition-old(root) üzerinde çalıştırmak için hangi CSS özelliği kullanılır?
- transition
- transition-name
- view-transition-name
- animation
Cevabı göster

animation — Doğru. animation özelliği @keyframes kümesini bir öğeye bağlar.

Animasyonun son kipini tamamla

/* eski görüntü dışarı kayar */
::view-transition-old(root) {
  animation: slide-out 0.4s ____;
}

Cevabı göster

/* eski görüntü dışarı kayar */
::view-transition-old(root) {
  animation: slide-out 0.4s forwards;
}

@keyframes parçalarını eşleştir

@keyframes

Animasyon karelerini tanımlar
from

Başlangıç karesi (0%)
to

Bitiş karesi (100%)
animation-name

Hangi @keyframes kullanılacağını söyler

Sıradaki ders: Cross-document transitions

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler