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

CSS veya JavaScript ile animasyon uygulayabilirsiniz. Hangisini, neden kullanmalısınız?

Paul Lewis

Sam Thorogood

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

Özet

• Kullanıcı arayüzü öğesi durumlarını açıp kapatmak gibi daha basit "tek seferlik" geçişler için CSS animasyonları kullanın.
• Geri sekme, durdurma, duraklatma, geri sarma veya yavaşlatma gibi gelişmiş efektler kullanmak istediğinizde JavaScript animasyonlarını kullanın.
• JavaScript ile animasyon uygulamayı seçerseniz Web Animasyonları API'sını veya rahatça kullanabileceğiniz modern bir çerçeveyi kullanın.

Temel animasyonların çoğu CSS veya JavaScript ile oluşturulabilir, ancak çaba miktarı ve süre farklılık gösterir (ayrıca CSS ve JavaScript Performansı konusuna bakın). Her birinin avantajları ve dezavantajları vardır, ancak bunlar iyi yönergelerdir:

• CSS'yi, kullanıcı arayüzü öğeleri için daha küçük, bağımsız durumlarınız olduğunda kullanın. CSS geçişleri ve animasyonları, yan taraftan gezinme menüsü getirmek veya bir ipucu göstermek için idealdir. Durumları kontrol etmek için JavaScript kullanmanız gerekebilir, ancak animasyonların kendileri CSS'nizde olacaktır.
• Animasyonlarınız üzerinde önemli kontrole ihtiyacınız olduğunda JavaScript kullanın. Web Animations API, günümüzde çoğu modern tarayıcıda kullanılabilen standartlara dayalı bir yaklaşımdır. Bu, gerçek nesneler sağlar ve karmaşık nesne odaklı uygulamalar için idealdir. JavaScript, animasyonlarınızı durdurmanız, duraklatmanız, yavaşlatmanız veya ters çevirmeniz gerektiğinde de yararlı olur.
• Tüm sahneyi elle düzenlemek için doğrudan requestAnimationFrame öğesini kullanın. Bu, gelişmiş bir JavaScript yaklaşımıdır ancak bir oyun oluşturuyorsanız veya HTML tuvali üzerine çizim yaparken faydalı olabilir.

Alternatif olarak, halihazırda animasyon işlevselliği içeren bir JavaScript çerçevesi kullanıyorsanız (örneğin, jQuery'nin .animate() yöntemi veya GreenSock'ın TweenMax yöntemi aracılığıyla) animasyonlarınızda bunu kullanmaya devam etmek genel olarak daha uygun olabilir.

CSS ile animasyon uygulama

CSS ile animasyon oluşturmak, bir öğeyi ekranda hareket ettirmenin en basit yoludur. 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 CSS'lerden bazıları verilmiştir. Bu işlem, 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ş işlemi başlar.

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

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

Deneyin

Geçiş süresinin yanı sıra, animasyonun hissi olan yumuşak geçiş seçenekleri de vardır. Yumuşatma hakkında daha fazla bilgi için Yumuşatmayla İ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 animasyonu açmak ve kapatmak için JavaScript'i kullanabilirsiniz:

box.classList.add('move');

Bu, uygulamalarınız için iyi bir denge sağlar. JavaScript ile durumu yönetmeye odaklanabilir, hedef öğeler için uygun sınıfları ayarlayıp tarayıcıyı animasyonlarla işleyecek şekilde bırakabilirsiniz. Bu rotayı takip ederseniz öğedeki transitionend etkinliklerini dinleyebilirsiniz, ancak bunu yalnızca Internet Explorer'ın eski sürümlerini desteklemeyi bırakabiliyorsanız dinleyebilirsiniz. Sürüm 10, bu etkinlikleri destekleyen ilk sürümdü. Diğer tüm tarayıcılar bir süredir etkinliği destekliyor.

Bir geçişin sonunu dinlemek için gereken JavaScript şöyle 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 kontrole sahip olmanızı sağlayan CSS animasyonlarını da kullanabilirsiniz.

Not: Animasyonları kullanmaya yeni başladıysanız animasyon kareleri elle çizilmiş animasyonlardaki eski bir terimdir. Animatörler, animasyon kareleri adı verilen bir hareket parçası için belirli kareler oluşturur. Bu kareler, bir hareketin en uç kısmı gibi şeyleri yakalar ve ardından animasyon kareleri arasındaki tüm ayrı kareleri çizmeye başlar. Bugün CSS animasyonlarında benzer bir sürecimiz var. Bu süreç, tarayıcıya CSS özelliklerinin belirli noktalarda hangi değerlere sahip olması gerektiğini bildiriyor ve boşlukları dolduruyor.

Örneğin, kutunun animasyonunu geçişlerle aynı şekilde yapabilirsiniz, ancak kutunun tıklama gibi herhangi bir kullanıcı etkileşimi olmadan ve sonsuz tekrarlarla canlandırmasını sağlayabilirsiniz. Ayrıca, aynı anda birden fazla ö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 tedarikçi önekleri eklemeniz gerekir. Birçok araç, ihtiyaç duyduğunuz CSS'nin önekli sürümlerini oluşturmanıza yardımcı olarak kaynak dosyalarınıza öneksiz sürümü yazmanıza olanak tanır.

JavaScript ve Web Animasyonları API'si 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 önemli ölçüde daha fazla güç sağlar. Belirli CSS özelliklerini canlandırmak veya composable efekt nesneleri oluşturmak için Web Animasyonları API'sini kullanabilirsiniz.

JavaScript animasyonlarının, kodunuzun bir parçası olarak satır içinde yazılması zorunludur. Bunları ayrıca başka nesnelerin içine de kapsülleyebilirsiniz. Aşağıda, daha önce açıklanan CSS geçişini yeniden oluşturmak için yazmanız gereken JavaScript kodu verilmiştir:

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)';
});

Varsayılan olarak, Web Animasyonları yalnızca bir öğenin sunumunu değiştirir. Nesnenizin taşındığı konumda kalmasını istiyorsanız örneğimize göre animasyon sona erdiğinde 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 bir çoklu dolgu kullanılabilir.

JavaScript animasyonlarıyla, her adımda bir öğenin stillerini tam olarak kontrol edebilirsiniz. Böylece, animasyonları yavaşlatabilir, duraklatabilir, durdurabilir, tersine çevirebilir ve öğeleri uygun gördüğünüz şekilde değiştirebilirsiniz. Bu, özellikle karmaşık, nesneye yönelik uygulamalar oluşturuyorsanız, davranışınızı düzgün bir şekilde kapsayabileceği için kullanışlıdır.