Animasyonlar: CSS animasyon efektlerini denetleme ve değiştirme

Sofia Emelianova
Sofia Emelianova

Chrome Geliştirici Araçları Animasyonlar çekmecesi sekmesiyle animasyonları inceleyin ve değiştirin.

Genel bakış

Animasyonları yakalamak için Animasyonlar sekmesini açın. Animasyonları otomatik olarak algılar ve gruplar halinde sıralar.

Animasyonlar sekmesinin iki temel amacı vardır:

  • Animasyonları inceleme. Bir animasyon grubunun kaynak kodunu yavaşlatın, yeniden oynatın veya inceleyin.
  • Animasyonlarda değişiklik yapma Bir animasyon grubunun zamanlamasını, gecikmesini, süresini veya animasyon karesi ofsetlerini değiştirin. Animasyon karesi ve Bezier düzenlemesi desteklenmez.

Animasyonlar sekmesi CSS animasyonlarını, CSS geçişlerini, web animasyonlarını ve View Transitions API'yi destekler. requestAnimationFrame animasyonları henüz desteklenmiyor.

Animasyon grubu nedir?

Animasyon grubu, birbiriyle ilişkili görünen bir dizi animasyondur.

Şimdilik web'de gerçek bir grup animasyonu kavramı yoktur, bu nedenle hareket tasarımcıları ve geliştiricileri tek tek animasyonlar oluşturup tek bir tutarlı görsel efekt olarak görünmeleri için animasyonlar oluştururlar. Animasyonlar sekmesi, ilgili animasyonları başlangıç zamanına göre (gecikmeler hariç) tahmin eder ve yan yana gruplandırır.

Diğer bir deyişle, Animasyonlar sekmesi aynı komut dosyası bloğunda tetiklenen animasyonları gruplandırır. Ancak eşzamansızsalar, farklı gruplar halinde sonuçlanırlar.

Başlayın

Animasyonlar sekmesini iki şekilde açabilirsiniz:

  • Diğer. Geliştirici Araçları'nı özelleştirin ve kontrol edin > Diğer araçlar > Animasyonlar'ı seçin. Animasyonlar'ı tıklayın.
  • Aşağıdakilerden birine basarak Komut Menüsü'nü açın:

    • macOS'te: Command+Üst Karakter+P
    • Windows, Linux veya ChromeOS'te: Control+Üst Karakter+P

    Ardından Show Animations yazmaya başlayın ve ilgili Çekmece panelini seçin. Animasyonları göster'i tıklayın.

Varsayılan olarak, Animasyonlar sekmesi Konsol çekmecesinin yanında bir sekme olarak açılır. Çekmece sekmesi olarak, herhangi bir panelle kullanabilir veya DevTools'un en üstüne taşıyabilirsiniz.

Animasyonlar sekmesi boş.

Animasyonlar sekmesinde dört ana bölüm vardır:

Animasyonlar panelinin bölümleri.

  1. Denetimler. Buradan, yakalanan animasyon gruplarını engelleyebilir, yakalanan tüm animasyon gruplarını duraklatabilir, duraklatabilir veya play_arrow devam ettir ya da seçilen animasyon grubunun hızını değiştirebilirsiniz.
  2. Genel Bakış. İncelemek ve Ayrıntılar bölmesinde değiştirmek için buradan bir animasyon grubu seçin.
  3. Zaman çizelgesi. Tekrar oynat Animasyonları tekrar oynatın, ileri geri oynatın veya belirli bir noktaya atlayın.
  4. Ayrıntılar. Seçilen animasyon grubunu inceleyin ve değiştirin.

Animasyon yakalamak için Animasyonlar sekmesi açıkken tetikleyin. Sayfa yükleme sırasında bir animasyon tetiklenirse animasyonu yeniden yükleyin.

Animasyonları inceleme

Bir animasyonu yakaladıktan sonra tekrar oynatmanın birkaç yolu vardır:

  • Önizlemesini görüntülemek için Genel Bakış bölmesinde küçük resmin üzerine gelin.
  • Görüntü alanı animasyonunu ileri geri oynatmak için video yer imlecini (kırmızı dikey çubuk) sürükleyin veya video yer imlecini belirli bir noktaya ayarlamak için Zaman Çizelgesi'nde herhangi bir yeri tıklayın. Animasyon, hâlihazırda oynatılıyorsa oynatılmaya devam eder, aksi takdirde durur.
  • Animasyon grubunu Genel Bakış bölmesinden seçin (böylece Ayrıntılar bölmesinde görüntülenir) ve Tekrar oynat düğmesi. Yeniden Oynat düğmesine basın. Animasyon, görüntü alanında tekrar oynatılır.

Seçili animasyon grubunun önizleme hızını değiştirmek için Kontroller çubuğundaki Animasyon hızı düğmeleri. Animasyon hızı düğmelerini tıklayın.

Animasyon ayrıntılarını göster

Bir animasyon grubunu yakaladıktan sonra, ayrıntılarını görüntülemek için Genel Bakış bölmesinden animasyon grubunu tıklayın.

Ayrıntılar bölmesinde, her bir animasyon kendi satırı alır. Karşılık gelen öğenin adının tamamını görmek için ad sütununu yeniden boyutlandırın.

Ayrıntılar bölmesi.

Görüntü alanında vurgulamak için bir animasyonun üzerine gelin. Animasyonu tıklayarak Öğeler panelinde seçin.

Görüntü alanında vurgulamak için bir animasyonun üzerine gelme.

animation-iteration-count özellikleri infinite olarak ayarlanırsa bazı animasyonlar süresiz olarak tekrarlanır. Animasyonlar sekmesi, tanımlarını ve yinelemelerini görüntüler.

Animasyon yinelemeleri.

Animasyonun en soldaki ve daha koyu bölümü, tanımıdır. Sağdaki bölümler iterasyonları teyit ediyor.

Örneğin, bir sonraki ekran görüntüsünde, ikinci ve üçüncü bölümler birinci bölümün yinelemelerini temsil etmektedir.

Animasyon yinelemeleri şeması.

İki öğeye aynı animasyon uygulanırsa Animasyonlar sekmesi, iki öğeye aynı rengi atar. Rengin kendisi rastgeledir ve hiçbir anlamı yoktur. Örneğin, aşağıdaki ekran görüntüsünde div.eye.left::after ve div.eye.right::after öğelerine div.feet::before ve div.feet::after öğelerinde olduğu gibi aynı animasyon (eyes) uygulanmıştır.

Renk kodlu animasyonlar.

Animasyonları değiştirme

Animasyonlar sekmesiyle bir animasyonu üç şekilde değiştirebilirsiniz:

  • Animasyon süresi.
  • Animasyon karesi zamanlamaları.
  • Başlangıç zamanı gecikmesi.

Bu bölümde, bir sonraki ekran görüntüsünün orijinal animasyonu temsil ettiğini varsayalım:

Değişiklikten önceki orijinal animasyon.

Bir animasyonun süresini değiştirmek için ilk veya son daireyi sürükleyin.

Değiştirilme süresi.

Animasyon herhangi bir animasyon karesi kuralı tanımlıyorsa bunlar beyaz iç daireler olarak gösterilir. Animasyon karesinin zamanlamasını değiştirmek için bunlardan birini sürükleyin.

Animasyon karesi değiştirildi.

Bir animasyona gecikme eklemek için daireleri değil, animasyonun kendisini tıklayın, ardından herhangi bir yere sürükleyin.

Değiştirilmiş gecikme.

Animasyon sırasında ::view-transition sözde öğeyi düzenleme

View Transitions API ile DOM'yi tek bir adımda değiştirebilir ve iki durum arasında animasyonlu geçiş oluşturabilirsiniz. API, animasyon sırasında aşağıdaki yapıyla bir yapay öğe ağacı oluşturur:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Bu yapıyı Öğeler > Stiller altında düzenlemek için:

  1. DevTools'u açın ve View Transitions API'yi kullanan bir sayfayı inceleyin. Örneğin, bu demo sayfası.
  2. Animasyonlar'da duraklat Duraklat'ı tıklayın.
  3. Sayfada bir animasyonu tetikleyin. Animasyonlar paneli bunu yakalar ve hemen duraklar. ::view-transition yapısını artık DOM'da, <head> öğesinin üstünde bulabilirsiniz.

    ::view-transition sözde öğenin CSS&#39;sini düzenleme.

  4. Öğeler > Stiller bölümünde ::view-transition sözde öğenin CSS'sini değiştirin.

  5. Sonucu görmek için animasyonu devam ettirin ve yeniden oynatın.

Daha fazla bilgi için View Transitions API ile sorunsuz ve basit geçişler başlıklı makaleye bakın.