Yüksek performanslı CSS animasyonlarına örnekler

Rachel Andrew Technical Writer

Dikkat: Glitch barındırma hizmetini sonlandırdığı için bu sayfadaki bir veya daha fazla demo artık çalışmıyor.

Bu yayında, CodePen'de bulunan bazı popüler animasyonların nasıl oluşturulduğunu öğreneceksiniz. Bu animasyonların tümü, bu bölümdeki diğer makalelerde ele alınan performanslı teknikleri kullanır.

Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? başlıklı makaleyi, pratik ipuçları için ise Animasyonlar Kılavuzu'nu inceleyin.

Sihirbaz yükleme animasyonu

CodePen'de sihirbaz yükleme animasyonunu görüntüleme

Bu yükleme animasyonu tamamen CSS ile oluşturulmuştur. Resim ve tüm animasyonlar CSS ve HTML ile oluşturulmuştur, resim veya JavaScript kullanılmamıştır. Nasıl oluşturulduğunu ve ne kadar iyi performans gösterdiğini anlamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz.

Chrome Geliştirici Araçları ile animasyonu inceleme

Animasyon çalışırken Chrome Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Özet'te, tarayıcının bu animasyonu çalıştırırken herhangi bir Düzen veya Boyama işlemi yapmadığını görürsünüz.

Sihirbaz animasyonunun profilini çıkardıktan sonraki özet.

Bu animasyonun düzen ve boyama işlemlerine neden olmadan nasıl oluşturulduğunu öğrenmek için Chrome Geliştirici Araçları'nda hareketli öğelerden herhangi birini inceleyin. Çeşitli animasyonlu öğeleri bulmak için Animasyonlar panelini kullanabilirsiniz. Herhangi bir öğeyi tıkladığınızda DOM'da vurgulanır.

Chrome Geliştirici Araçları Animasyon panelinde öğeleri görüntüleme ve seçme

Örneğin, üçgeni seçin ve öğe kutusunun havaya doğru yolculuğu sırasında, dönerken ve ardından başlangıç konumuna dönerken nasıl dönüştüğünü izleyin.

Chrome Geliştirici Araçları'nda üçgenin yolunu nasıl izleyebileceğimizi gösteren video.

Öğe seçiliyken Stiller paneline bakın. Burada üçgen şeklini çizen CSS'yi ve kullanılan animasyonu görebilirsiniz.

İşleyiş şekli

Üçgen, oluşturulan içeriği eklemek için ::after sözde öğesi kullanılarak ve şekli oluşturmak için kenarlıklar kullanılarak oluşturulur.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

Not: Kenarlıkları ve oluşturulan içeriği kullanarak şekil oluşturma hakkında daha fazla bilgiyi The Shapes of CSS (CSS Şekilleri) sayfasında bulabilirsiniz.

Animasyon, aşağıdaki CSS satırıyla eklenir:

animation: path_triangle 10s ease-in-out infinite;

Chrome Geliştirici Araçları'nda Stil Paneli'ni aşağı kaydırarak kareleri bulabilirsiniz. Burada, animasyonun öğenin konumunu değiştirmek ve döndürmek için transform kullanılarak oluşturulduğunu göreceksiniz. transform özelliği, Animasyonlar Kılavuzu'nda açıklanan özelliklerden biridir. Bu özellik, tarayıcının düzen veya boyama işlemleri (yavaş animasyonların ana nedenleri) yapmasına neden olmaz.

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

Bu animasyonun farklı hareketli parçalarının her birinde benzer teknikler kullanılır. Sonuç, sorunsuz çalışan karmaşık bir animasyondur.

Yanıp sönen daire

CodePen'de Titreşen Daire'yi görüntüleyin

Bu tür animasyonlar bazen sayfadaki bir şeye dikkat çekmek için kullanılır. Animasyonu anlamak için Firefox Geliştirici Araçları'nı kullanabilirsiniz.

Firefox Geliştirici Araçları ile animasyonu inceleme

Animasyon çalışırken Firefox Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Kaydı durdurun. Şelalede Stili Yeniden Hesapla için giriş olmadığını görürsünüz. Artık bu animasyonun stilin yeniden hesaplanmasına ve dolayısıyla düzen ve boyama işlemlerine neden olmadığını biliyorsunuz.

Firefox Geliştirici Araçları Şelalesi.

Firefox Geliştirici Araçları'nda kalarak daireyi inceleyin ve bu animasyonun nasıl çalıştığını görün. pulsating-circle sınıfına sahip <div>, dairenin konumunu işaretler ancak daire çizmez.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

Görünür daire ve animasyonlar, ::before ve ::after sözde öğeleri kullanılarak oluşturulur.

::before öğesi, pulse-ring adlı animasyonu kullanarak beyaz dairenin dışına taşan opak halkayı oluşturur. Bu animasyon, transform: scale ve opacity özelliklerini canlandırır.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

Hangi özelliklerin animasyonlu olduğunu görmenin bir başka yolu da Firefox Geliştirici Araçları'nda Animasyonlar panelini seçmektir. Ardından, kullanılan animasyonların ve animasyon uygulanan özelliklerin görselleştirmesini görürsünüz.

::before sözde öğesi seçildiğinde hangi özelliklerin animasyonlu olduğunu görebiliriz.

Beyaz dairenin kendisi, ::after sözde öğesi kullanılarak oluşturulur ve canlandırılır. pulse-dot animasyonu, animasyon sırasında noktayı büyütüp küçültmek için transform: scale kullanır.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

Böyle bir animasyon uygulamanızın çeşitli yerlerinde kullanılabilir. Bu küçük dokunuşların uygulamanızın genel performansını etkilememesi önemlidir.

Saf CSS 3D küre

CodePen'de Pure CSS 3D Sphere'i görüntüleyin

Bu animasyon son derece karmaşık görünse de önceki örneklerde gördüğümüz teknikleri kullanıyor. Karmaşıklık, çok sayıda öğeye animasyon eklenmesinden kaynaklanır.

Chrome Geliştirici Araçları'nı açın ve plane sınıfına sahip öğelerden birini seçin. Küre, dönen düzlemler ve çubuklardan oluşur.

Uçak dönüyor gibi görünüyor.

Not: Chrome Geliştirici Araçları'ndaki DOM Arama Aracı, incelemek istediğiniz öğeyi bulmanızı kolaylaştırabilir.

Bu düzlemler ve kollar bir sarmalayıcı <div> içinde yer alır. transform: rotate3d kullanılarak döndürülen öğe de budur.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

Noktalar plane ve spoke öğelerinin içine yerleştirilmiştir. Noktaları ölçeklendirmek ve çevirmek için dönüşüm kullanan bir animasyon kullanılır. Bu işlem, yanıp sönme efektini oluşturur.

Nokta, küreyle birlikte döner ve yanıp söner.

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

Bu animasyonu oluştururken en çok zamanlamayı doğru ayarlamak, dönme ve yanıp sönme efektini oluşturmak için uğraştım. Animasyonlar oldukça basit ve çok iyi performans gösteren yöntemler kullanıyor.

Chrome Geliştirici Araçları'nı açıp animasyon çalışırken Performans'ı kaydederek bu animasyonun performansını görebilirsiniz. İlk yüklemeden sonra animasyon, Düzen veya Boyama'yı tetiklemez ve sorunsuz çalışır.

Sonuç

Bu örneklerden, performanslı yöntemler kullanarak birkaç özelliği canlandırmanın nasıl çok etkileyici animasyonlar oluşturabileceğini görebilirsiniz. Animasyonlar kılavuzunda açıklanan performans yöntemlerini varsayılan olarak kullanarak, sayfayı yavaşlatma konusunda daha az endişe duyarak istediğiniz efekti oluşturmaya zaman ayırabilirsiniz.