Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS ve JavaScript animasyonlarını karşılaştırma

CSS veya JavaScript ile animasyon oluşturabilirsiniz. Hangisini kullanmalısınız? Neden?

Paul Lewis

Sam Thorogood

Web'de animasyon oluşturmanın iki temel yolu vardır: CSS ve JavaScript ile. Hangisini seçeceğiniz, projenizin diğer bağımlılıklarına ve ne tür etkiler elde etmek istediğinize bağlıdır.

Özet

Daha basit bir "tek seferlik" görüntü için CSS animasyonlarını kullanın durumları arasında geçiş yapmak gibi.
Zıplama, durdurma, duraklatma, geri sarma veya yavaşlatma gibi gelişmiş efektler kullanmak istediğinizde JavaScript animasyonlarını kullanın.
JavaScript ile animasyon oluşturmayı seçerseniz Web Animations API'yi veya uygun olan modern bir çerçeveyi kullanın.

Çoğu temel animasyon, CSS veya JavaScript ile oluşturulabilir ancak bunun için gereken çaba ve süre farklılık gösterir (CSS ve JavaScript Performansı başlıklı makaleyi de inceleyin). Her birinin artıları ve eksileri vardır, ancak bunlar iyi yönergelerdir:

Kullanıcı arayüzü öğeleri için daha küçük ve bağımsız durumlarınız olduğunda CSS'yi kullanın. CSS geçişleri ve animasyonları, yandan bir gezinme menüsü getirmek veya bir ipucu göstermek için idealdir. Durumları kontrol etmek için JavaScript'i kullanabilirsiniz ancak animasyonların kendisi CSS'nizde olacaktır.
Animasyonlarınız üzerinde önemli düzeyde kontrole ihtiyacınız olduğunda JavaScript kullanın. Web Animations API, bugün çoğu modern tarayıcıda kullanılabilen standart tabanlı yaklaşımdır. Bu sayede, karmaşık nesne odaklı uygulamalar için ideal olan gerçek nesneler elde edilir. JavaScript, animasyonlarınızı durdurmanız, duraklatmanız veya yavaşlatmanız veya geri almanız gerektiğinde de yararlı olur.
Bir sahnenin tamamını elle düzenlemek istediğinizde doğrudan requestAnimationFrame özelliğini kullanın. Bu, gelişmiş bir JavaScript yaklaşımıdır ancak oyun oluştururken veya HTML tuvali üzerinde çizim yaparken yararlı olabilir.

Alternatif olarak, halihazırda jQuery'nin .animate() yöntemi veya GreenSock'ın TweenMax yöntemi gibi animasyon işlevleri içeren bir JavaScript çerçevesi kullanıyorsanız animasyonlarınızda bu çerçeveye bağlı kalmanın genel olarak daha uygun olabileceğini düşünüyoruz.

CSS ile animasyon uygulama

Ekranda bir şeyleri harekete geçirmenin en basit yolu CSS ile animasyon oluşturmaktır. Ne yapılmasını istediğinizi belirttiğiniz için bu yaklaşım bildirim temelli olarak tanımlanır.

Aşağıda, bir 100px öğesini hem X hem de Y ekseninde taşıyan bazı CSS'ler gösterilmektedir. 500ms alacak şekilde ayarlanmış bir CSS geçişi kullanılarak yapılır. move sınıfı eklendiğinde transform değeri değiştirilir ve geçiş başlar.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Deneyin

Geçiş süresinin yanı sıra, temelde animasyonun nasıl hissettirdiği olan yumuşak geçiş seçenekleri de vardır. Yumuşak geçiş hakkında daha fazla bilgi için Yumuşak Geçişle İlgili Temel Bilgiler kılavuzuna bakın.

Yukarıdaki snippet'te olduğu gibi, animasyonlarınızı yönetmek için ayrı CSS sınıfları oluşturursanız her bir animasyonu açıp kapatmak için JavaScript'i kullanabilirsiniz:

box.classList.add('move');

Bu sayede uygulamalarınız için iyi bir denge kurarsınız. JavaScript ile durumu yönetmeye odaklanabilir ve hedef öğelerde uygun sınıfları ayarlayarak animasyonları işlemesi için tarayıcının bırakın. Bu şekilde ilerlerseniz öğede transitionend etkinliklerini dinleyebilirsiniz. Ancak Internet Explorer'ın eski sürümleri için destekten vazgeçebiliyorsanız bu etkinlikleri dinleyebilirsiniz. 10. sürüm ise bu etkinlikleri destekleyen ilk sürümdü. Diğer tüm tarayıcılar bir süredir bu etkinliği destekliyordu.

Bir geçişin sonunu dinlemek için gereken JavaScript aşağıdaki gibi görünür:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

CSS geçişlerini kullanmanın yanı sıra, bağımsız animasyon animasyon kareleri, süreleri ve yinelemeleri üzerinde çok daha fazla kontrol sahibi olmanızı sağlayan CSS animasyonlarını da kullanabilirsiniz.

Örneğin, kutuyu geçişlerle aynı şekilde canlandırabilirsiniz, ancak kutunun tıklama gibi kullanıcı etkileşimleri olmadan ve sonsuz tekrarlarla animasyonlanmasını sağlayabilirsiniz. Ayrıca aynı anda birden çok özelliği değiştirebilirsiniz.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Deneyin

CSS animasyonlarıyla, animasyonun kendisini hedef öğeden bağımsız olarak tanımlar ve gerekli animasyonu seçmek için animation-name özelliğini kullanırsınız.

CSS animasyonlarınızın eski tarayıcılarda çalışmasını istiyorsanız satıcı önekleri eklemeniz gerekir. Birçok araç, ihtiyacınız olan CSS'nin önekli sürümlerini oluşturmanıza yardımcı olabilir. Böylece, kaynak dosyalarınızda önekli olmayan sürümü yazabilirsiniz.

JavaScript ve Web Animations API ile animasyon uygulama

JavaScript ile animasyon oluşturmak, karşılaştırıldığında CSS geçişleri veya animasyonları yazmaktan daha karmaşıktır, ancak genellikle geliştiricilere çok daha fazla güç sağlar. Belirli CSS mülklerini canlandırmak veya derlenebilir efekt nesneleri oluşturmak için Web Animasyonları API'sini kullanabilirsiniz.

JavaScript animasyonlarının, kodunuzun bir parçası olarak satır içine yazılması zorunludur. Bunları diğer nesnelerin içine de alabilirsiniz. Daha önce açıklanan CSS geçişini yeniden oluşturmak için yazmanız gereken JavaScript'i aşağıda bulabilirsiniz:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Web Animasyonları varsayılan olarak yalnızca bir öğenin sunumunu değiştirir. Nesnenizin taşındığı konumda kalmasını isterseniz örneğimize göre animasyon bittiğinde nesnenin temel stillerini değiştirmeniz gerekir.

Deneyin

Web Animations API, W3C'nin nispeten yeni bir standardıdır. Modern tarayıcıların çoğunda yerel olarak desteklenir. Desteklenmeyen modern tarayıcılar için çoklu dolgu mevcuttur.

JavaScript animasyonlarıyla, her adımda bir öğenin stili üzerinde tam kontrole sahip olursunuz. Yani animasyonları yavaşlatabilir, duraklatabilir, durdurabilir, tersine çevirebilir ve öğeleri uygun gördüğünüz şekilde değiştirebilirsiniz. Bu, özellikle karmaşık, nesne odaklı uygulamalar oluşturuyorsanız yararlı olur. Çünkü davranışınızı doğru şekilde yansıtabilirsiniz.