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ış

Animasyonlar yakalamak için Animasyonlar panelini açın. Bu araç, animasyonları otomatik olarak tespit edip gruplar halinde sıralar.

Animasyonlar panelinin iki ana amacı vardır:

• Animasyonları inceleyin. Animasyonlarda kaynak kodunu yavaşlatın, tekrar oynatın veya inceleyin grubu.
• Animasyonları değiştirme. Bir reklam öğesinin zamanlamasını, gecikmesini, süresini veya animasyon karesi ofsetlerini tıklayın. Animasyon karesi ve Bezier düzenleme desteklenmiyor.

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.

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

Diğer bir deyişle, Animasyonlar paneli aynı komut dosyası bloğunda tetiklenen animasyonları bir arada gruplandırır. Ancak eşzamansız olanlar farklı gruplarda yer alır.

Animasyonlar panelini açma

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

• Geliştirici Araçları'nı özelleştir ve kontrol et'i seçin > Diğer araçlar > Animasyonlar.

• 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.

Varsayılan olarak Animasyonlar paneli, Konsol çekmecesinin yanında bir sekme olarak açılır. Çekmece sekmesi olarak bu sekmeyi herhangi bir panelle kullanabilir veya Geliştirici Araçları'nın en üstüne taşıyabilirsiniz.

Animasyonlar paneli, açtığınızda devam eden animasyonları otomatik olarak yakalar. 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 tüm animasyon gruplarını engelleyebilir Tüm animasyon gruplarını temizle, duraklatabilir veya play_arrow animasyonları devam ettirebilir veya seçilen animasyon grubunun hızını değiştirebilirsiniz.

2. Genel Bakış. Simgelerle işaretlenmiş iki tür yakalanmış animasyon gruplarını gösterir: fare kaydırmaya dayalı ve program 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ırmaya dayalı animasyonlar için piksel cinsinden.
   • Zamana dayalı program animasyonları için milisaniye cinsinden.

   Zaman çizelgesinde bir animasyonu tekrar oynatabilir, tekrar oynatabilir, ileri geri oynatabilir veya belirli bir noktaya atlayabilirsiniz.

4. Ayrıntılar. Seçili animasyon grubunu incele ve değiştir.

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

Animasyonları inceleme

Animasyonları yakaladıktan sonra yeniden oynatmak için birkaç yöntem vardır:

• Önizlemesini görüntülemek için Genel Bakış bölmesinde fareyle 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 oynatılıyorsa oynatılmaya devam eder, aksi takdirde durur.
• Genel Bakış bölmesinden animasyon grubunu seçin (Ayrıntılar'da görüntülenmesi için bölme) ve Tekrar Oynat düğmesine basın. İlgili içeriği oluşturmak için kullanılan animasyonu görüntü alanında tekrar oynatılır.

Seçilen animasyon grubunun önizleme hızını değiştirmek için Kontroller çubuğundaki 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 Overview (Genel Bakış) bölmesinden grubu tıklayın.

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

Görüntü alanında vurgulamak için fareyle bir animasyonun üzerine gelin. Animasyonu tıklayarak Elements paneli.

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

Animasyonun en soldaki ve en koyu bölümü, animasyonun tanımıdır. Sağdaki, daha soluk bölümler yinelemeleri temsil eder.

Örneğin, bir sonraki ekran görüntüsünde, ikinci ve üçüncü bölümler yinelemeleri bulunur.

İki öğeye aynı animasyon uygulanmışsa Animasyonlar paneli bunları olmasını istersiniz. Renk rastgeledir ve herhangi bir önem taşımaz. Örneğin, aşağıdaki ekran görüntüsünde div.eye.left::after ve div.eye.right::after öğelerinin animasyonları aynı (eyes) div.feet::before ve div.feet::after öğeleriyle birlikte uygulanır.

Animasyonları değiştirme

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

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

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.

Animasyon herhangi bir animasyon karesi kuralı tanımlıyorsa bunlar, beyaz iç dairelerle 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, animasyonun kendisini tıklayın, ardından herhangi bir yere sürükleyin.

@keyframes yayınını canlı olarak düzenleyin

Stiller'de @keyframes simgesini değiştirdiğinizde, efektleri hemen Animasyonlar panelinde 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. Elements'de class="pulser" ile öğeyi inceleyin ve Elements'de @keyframes pulse bölümünü bulun.
3. Animasyon karelerini değiştirmeyi deneyin, örneğin, 50% olan ikinci animasyon karesini 20% olarak değiştirin.
4. Stiller'de yaptığınız değişikliklerin Animasyonlar paneli tarafından yakalanan animasyonu nasıl etkilediğini gözlemleyin.

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

View Transitions API ile DOM'yi tek bir adımda değiştirebilir ve iki durum arasında animasyonlu bir geçiş oluşturabilirsiniz. API, bir animasyon sırasında aşağıdaki yapıyla 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)

Bu yapıyı Elements'de düzenlemek için > Stiller:

1. Dev Tools'u açın ve View Transitions API'nin kullanıldığı bir sayfayı inceleyin. Örneğin, bu demo sayfası.
2. Animasyonlar'da duraklat Duraklat'ı tıklayın.

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

   

4. Elements > Styles (Stiller) ise ::view-transition sözde öğesinin CSS'sini değiştirin.

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

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