Hareket

• Özel geometrik açılışlar ve yumuşak kararmalar için clip-path ve mask-image kullanın.
• JS dinleyicileri yerine, kaydırmaya bağlı temel olmayan efektler için kaydırmaya dayalı animasyonları (animation-timeline: scroll()) kullanın.
• Karmaşık düzen durumları arasında sorunsuz bir şekilde animasyon oluşturmak için Görünüm Geçişleri'ni kullanın.

Performans

• Animasyonların birleştirici iş parçacığında kalmasını sağlamak için opacity ve transform özelliklerini (left/right/top/bottom yerine translate gibi bağımsız dönüştürme özellikleri dahil) canlandırmayı tercih edin.
• Ayrı giriş ve çıkış durumlarını yerel olarak canlandırmak için transition-behavior: allow-discrete, @starting-style ve (<dialog> veya [popover] gibi üst katman öğeleri için) overlay kullanın. Öğe Giriş ve Çıkışını Canlandırma ve Öğeleri Üst Katmana ve Üst Katmandan Canlandırma başlıklı makaleleri inceleyin.

.popover-reveal {
  /* Transition discrete display and top-layer overlay alongside opacity */
  transition:
    opacity ease-out,
    display,
    overlay;
  transition-duration: 0.2s;
  transition-behavior: allow-discrete;
}

Erişilebilirlik

Tercih eden kullanıcılar için yoğun hareketi kapatmak üzere prefers-reduced-motion medya sorgularını kullanın.

• Duraklatma mekanizması sağlayın: Kullanıcıların otomatik olarak çalışan bantları, banner'ları veya diğer kalıcı animasyonları durdurmasına izin verin.
• Varsayılan olarak statik görünümleri kullanın: Varsayılan olarak statik durumları kullanmayı ve kullanıcıların hareketi etkinleştirmesine izin vermeyi düşünün.
• Yanıp sönme sınırlarını (saniyede üç kez) aşmayın: Işığın hızlı bir şekilde yanıp sönmesine kesinlikle izin vermeyin. Bu tür efektler nöbetlere neden olabilir.

animation-duration: 0.01ms; özelliğini genel olarak UYGULAMAYIN. Bu, belirli animasyonların daha sarsıcı olmasına neden olabilir. Bunun yerine, hareket tercihlerini iki yaklaşımdan birini kullanarak duruma göre ele alın ve @media sorgusunu kuralın içine yerleştirerek her iki sürümün de bir arada tutulmasını sağlayın:

• Animasyonlar varsayılan olarak etkinleştirilmiş şekilde başlayın ve @media (prefers-reduced-motion: reduce) kullanarak animasyonları azaltın:

/* Good: Dampen spin states or slow down animations for reduced motion */
.spinner {
  animation: spin 1s linear infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
    opacity: 0.5;
  }
}

progress:not([value]) {
  animation: slide 1s infinite linear;
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 20s;
  }
}

• Varsayılan olarak animasyon olmadan başlayın ve @media (prefers-reduced-motion: no-preference) kullanarak animasyonları etkinleştirin:

/* Good: Default to static or gentle states and opt-in to full motion */
.spinner {
  opacity: 0.5;
  @media (prefers-reduced-motion: no-preference) {
    opacity: 1;
    animation: spin 1s linear infinite;
  }
}

progress:not([value]) {
  animation: slide 20s infinite linear;
  @media (prefers-reduced-motion: no-preference) {
    animation-duration: 1s;
  }
}

JavaScript'te animasyon ve geçiş etkinlikleriyle çalışma

Hem AnimationEvent (animationstart, animationiteration, animationend, animationcancel) hem de TransitionEvent (transitionrun, transitionstart, transitionend, transitioncancel) arayüzlerinde event.target, kaynak DOM öğesini verir. Etkinliği tetikleyen belirli Animation nesnesine (Animation, CSSAnimation veya CSSTransition) erişmek için salt okunur event.animation özelliğini kullanın.

event.animation kullanılamadığında, genellikle event.target.getAnimations() yöntemini çağırıp event.animationName (veya geçişler için event.propertyName) ölçütüne göre filtreleyerek Animation örneğini bulabilirsiniz. Ancak event.target.getAnimations()'i filtreleyen bu yedeğin beklendiği gibi çalışmadığı çeşitli senaryolardan kaçınmak için doğrudan event.animation kullanılması tercih edilir:

• Web Animations API (element.animate()) animasyonlarının animationName değeri olmadığından event.target.getAnimations() filtrelenirken ada göre eşleştirilemez.
• Aynı ada sahip birden fazla animasyon aynı öğeye eklendiğinde AnimationEvent için animationName ile filtreleme belirsiz olur.
  • Geçiş özelliği başına yalnızca bir etkinlik olduğundan TransitionEvent için transitionProperty üzerinde filtreleme yapmanın işe yaradığını unutmayın.
• event.target her zaman kaynak DOM öğesini gösterir. Bu nedenle, öğenin kendisinde çalışan animasyonlar ile sözde öğelerinden birinde çalışan animasyonlar arasında ayrım yapmaz. event.animation.effect.pseudoElement ise hedef sözde öğeyi doğrudan gösterir.

// Works in most basic CSS animation cases, but fails for WAAPI animations,
// duplicate animation names on the same element, or pseudo-elements.
document.addEventListener('animationstart', (event) => {
  const animation = event.target
    .getAnimations()
    .find((anim) => anim.animationName === event.animationName);
  console.log(animation);
});

// PREFERRED: Directly access the exact Animation object via event.animation
document.addEventListener('animationstart', (event) => {
  const animation = event.animation;
  console.log(animation);
});

'animation' in AnimationEvent.prototype (veya 'animation' in TransitionEvent.prototype) kullanarak desteği özellik algılayabilirsiniz.