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

Kayce Basques

Sofia Emelianova

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

Genel Bakış

Animasyon yakalamak için Animasyonlar panelini açın. Animasyonları otomatik olarak algılar ve gruplara ayırır.

Animasyonlar panelinin iki ana amacı vardır:

• Animasyonları inceleyin. Animasyon grubunun kaynak kodunu yavaşlatabilir, yeniden oynatabilir veya inceleyebilirsiniz.
• Animasyonları değiştirme. Bir animasyon grubunun zamanlamasını, gecikmesini, süresini veya animasyon karesi ofsetlerini değiştirin. Ana kare ve Bezier düzenleme desteklenmez.

Önemli nokta: CSS geçiş ve animasyon yumuşatmalarının zamanlamalarını düzenleyebilir ve Öğeler > Stiller bölmesinde Yumuşatma Düzenleyici ile özel Bezier eğrileri yapılandırabilirsiniz.

Animasyonlar paneli; 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 animasyonlar grubudur.

Web'de şu anda grup animasyonu kavramı olmadığından hareket tasarımcıları ve geliştiriciler, tek bir tutarlı görsel efekt olarak görünecek şekilde ayrı animasyonlar oluşturup zamanlamaktadır. Animasyonlar paneli, ilgili animasyonları başlangıç zamanına göre tahmin eder (gecikmeler hariç) ve yan yana gruplandırır.

Diğer bir deyişle, Animasyonlar paneli aynı komut dosyası bloğunda tetiklenen animasyonları gruplandırır ancak bunlar eşzamanlı değilse farklı gruplara ayrılır.

Animasyonlar panelini açma

Animasyonlar panelini açmanın iki yolu vardır:

• DevTools'u özelleştirin ve kontrol edin > Diğer araçlar > Animasyonlar'ı seçin.

• 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 Çekme panelini seçin.

Animasyonlar paneli varsayılan olarak Konsol çekmecesinin yanında bir sekme olarak açılır. Çekmeceli sekme olarak herhangi bir panelle kullanabilir veya DevTools'un üst kısmına taşıyabilirsiniz.

Animasyonlar panelini açtığınızda devam eden animasyonlar otomatik olarak yakalanır. Bir animasyon sayfa yüklemede tetikleniyorsa veya durmuşsa, panel açık olacak şekilde sayfayı yeniden yükleyin.

Animasyonlar paneli kullanıcı arayüzünü tanıma

Animasyonlar panelinde dört ana bölüm bulunur:

1. Kontroller. Buradan, yakalanan animasyon gruplarını Tümünü temizle'yi engelleyebilir, Duraklat'ı duraklatabilir veya play_arrow Devam ettir'i seçerek animasyonları devam ettirebilir ya da seçili animasyon grubunun hızını değiştirebilirsiniz.

2. Genel Bakış. İki tür yakalanan animasyon grubunu simgelerle işaretlenmiş olarak gösterir: fare kaydırmayla çalışan ve planlanmış normal (zamana dayalı).

   Ayrıntılar bölmesinde incelemek ve değiştirmek için buradan bir animasyon grubu seçin.

3. Zaman çizelgesi. Animasyon grubunun türüne bağlı olarak zaman çizelgesi şöyle olabilir:

   • Fare kaydırmayla çalışan animasyonlar için piksel cinsinden.
   • Zamana dayalı program animasyonları için milisaniye cinsinden.

   Zaman çizelgesinde, bir animasyonu yeniden oynatabilir yeniden oynatabilir, ileri veya geri sarabilir ya da belirli bir noktaya atlayabilirsiniz.

4. Ayrıntılar. Seçili animasyon grubunu inceleyip değiştirin.

Animasyon yakalamak için Animasyonlar paneli açıkken animasyonu tetikleyin.

Animasyonları inceleme

Kaydettiğiniz animasyonları birkaç şekilde yeniden oynatabilirsiniz:

• Önizlemesini görüntülemek için Genel Bakış bölmesinde fareyle küçük resmin üzerine gelin.
• Görüntü alanı animasyonunu ilerletmek için video yer imlecini (kırmızı dikey çubuk) sürükleyin veya video yer imlecini belirli bir noktaya ayarlamak için zaman çizelgesinin herhangi bir yerini tıklayın. Animasyon, zaten oynatılıyorsa oynatmaya devam eder, aksi takdirde durdurulur.
• Genel bakış bölmesinden animasyon grubunu seçin (Ayrıntılar bölmesinde gösterilmesi için) ve 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 Denetimler çubuğundaki Animasyon hızı düğmelerini tıklayın.

Animasyon ayrıntılarını görüntüleme

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

Ayrıntılar bölmesinde her animasyon için ayrı bir satır bulunur. İlgili öğenin adını tamamen görmek için ad sütununu yeniden boyutlandırın.

Bir animasyonu görüntü alanında vurgulamak için fareyle animasyonun üzerine gelin. Öğeler panelinde animasyonu seçmek için tıklayın.

animation-iteration-count özellikleri infinite değerine ayarlanırsa bazı animasyonlar süresiz olarak tekrarlanır. Animasyonlar panelinde bunların tanımları ve iterasyonları gösterilir.

Animasyonun en soldaki, daha koyu renkli bölümü tanımıdır. Sağ taraftaki daha soluk bölümler iterasyonları temsil eder.

Örneğin, aşağıdaki ekran görüntüsünde ikinci ve üçüncü bölümler birinci bölümün iterasyonlarını temsil etmektedir.

İki öğeye aynı animasyon uygulanırsa Animasyonlar paneli onlara aynı rengi atar. Renk rastgeledir ve herhangi bir anlam ifade etmez. Örneğin, aşağıdaki ekran görüntüsünde div.eye.left::after ve div.eye.right::after öğelerinin yanı sıra div.feet::before ve div.feet::after öğelerine de aynı animasyon (eyes) uygulanmıştır.

Animasyonları değiştirme

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

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

Önemli nokta: Animasyonlar sekmesinde yaptığınız tüm değişiklikler, ilgili öğelere satır içi stiller uygular. Böylece, ortaya çıkan animasyonları hemen görebilir ve yeniden oynatabilirsiniz.

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

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

Animasyonda animasyon karesi kuralları tanımlanmışsa bunlar beyaz iç daireler olarak gösterilir. Animasyon karesinin zamanlamasını değiştirmek için bunlardan birini sürükleyin.

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

@keyframes canlı yayınını düzenleme

Stiller'de @keyframes'ı değiştirdiğinizde, Animasyonlar panelinde efektleri hemen görebilirsiniz.

Bu demo sayfasında deneyin:

1. Animasyonlar panelini açın. Sayfada devam eden nabız animasyonunu otomatik olarak yakalar. İşlem çubuğundaki kontrollerin altından animasyonu seçin.
2. Öğeler'de class="pulser" ile öğeyi inceleyin ve Stiller'de @keyframes pulse bölümünü bulun.
3. Animasyon karelerini değiştirmeyi deneyin. Örneğin, ikinci animasyon karesini 50% yerine 20% olarak değiştirin.
4. Stiller'de yaptığınız değişikliklerin Animasyonlar panelinde yakalanan animasyonu nasıl etkilediğini gözlemleyin.

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

View Transitions API ile iki durum arasında animasyonlu bir geçiş oluştururken DOM'u tek adımda değiştirebilirsiniz. API, animasyon sırasında aşağıdaki yapıya sahip bir sözde öğe ağacı oluşturur:

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

Öğeler > Stiller bölümünde bu yapıyı düzenlemek için:

1. Geliştirici Araçları'nı açın ve Görüntü Geçişleri API'sini kullanan bir sayfayı inceleyin. Örneğin, bu demo sayfası.
2. Animasyonlar bölümünde duraklat Duraklat'ı tıklayın.

3. Sayfada bir animasyon tetikleyin. Animasyonlar paneli, animasyonu yakalar ve hemen duraklatır. ::view-transition yapısını artık DOM'de, <head> öğesinin en üstünde bulabilirsiniz.

   

4. Öğeler > Stiller bölümünde ::view-transition sözde öğelerinin 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ı makaleyi inceleyin.