Geliştirici Araçları İpuçları: CSS animasyonlarını denetleme ve değiştirme
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Chrome Geliştirici Araçları'ndaki Animasyonlar sekmesi, CSS animasyon zamanlamalarını yavaşlatmanıza, yeniden oynatmanıza, ayarlamanıza ve sonuçları hemen görmenize yardımcı olan güçlü bir araçtır.
Açıkken Animasyonlar sekmesi, animasyonları otomatik olarak kaydeder, uygun şekilde gruplandırır ve şunları yapmanıza olanak tanır:
- Animasyonları daha iyi incelemek için yeniden oynatın ve yavaşlatın.
- CSS değerlerini tahmin edip manuel olarak ayarlamak yerine, zaman çizelgesindeki noktaları sürükleyerek süreleri, zamanlamaları ve gecikmeleri ayarlayın.
Ayrıca, Öğeler > Stiller bölmesinde Yumuşatma Düzenleyici'yi kullanarak yumuşatma zamanlamalarını düzenleyebilir ve özel cubic-bezier
eğri değerleri ayarlayabilirsiniz. Daha fazla bilgi edinmek için Geçiş Düzenleyici ile animasyon ve geçiş zamanlamalarını düzenleme başlıklı makaleyi inceleyin.
Daha uygulamalı bir öğrenme deneyimi için CSS animasyon efektlerini inceleme ve değiştirme kılavuzunu inceleyin.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2022-08-11 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2022-08-11 UTC."],[],[],null,[]]