Bu yayında, CodePen'de bulunan bazı popüler animasyonların nasıl oluşturulduğunu öğrenebilirsiniz. Bu animasyonların tümünde, bu bölümdeki diğer makalelerde ele alınan yüksek performanslı teknikler kullanılır.
Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? başlıklı makaleyi, pratik ipuçları için ise Animasyon 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 animasyonun tamamı 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 bölümünde, bu animasyon çalıştırılırken tarayıcının herhangi bir düzen veya boyama işlemi yapmadığını görmeniz gerekir.
Bu animasyonun düzen ve boyama sorununa yol açmadan nasıl yapıldığını öğrenmek için Chrome Geliştirici Araçları'nda hareket eden öğelerden birini inceleyin. Çeşitli animasyonlu öğeleri bulmak için Animasyonlar Paneli'ni kullanabilirsiniz. Herhangi bir öğeyi tıkladığınızda bu öğe DOM'da vurgulanır.
Örneğin, üçgeni seçin, ve öğe kutusunun havaya doğru yolculuğu sırasında nasıl dönüştüğünü, döndüğünü ve ardından başlangıç konumuna döndüğünü izleyin.
Öğe seçiliyken Stiller paneline bakın. Burada, üçgenin ş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;
}
Animasyon, aşağıdaki CSS satırıyla eklenir.
animation: path_triangle 10s ease-in-out infinite;
Chrome Geliştirici Araçları'nda kalıp Stil Paneli'ni aşağı kaydırarak anahtar 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, Animasyon Kılavuzu'nda açıklanan özelliklerden biridir ve tarayıcının düzen veya boyama işlemleri yapmasına neden olmaz (yavaş animasyonların temel nedenleri bunlardır).
@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ç olarak sorunsuz çalışan karmaşık bir animasyon elde edilir.
Pulsating Circle
CodePen'de Pulsating Circle'ı görüntüleyin
Bu tür animasyonlar bazen bir sayfadaki bir şeye dikkat çekmek için kullanılır. Animasyonu anlamak için Firefox Geliştirici Araçları'nı kullanabilirsiniz.
Animasyonu Firefox Geliştirici Araçları ile inceleme
Animasyon çalışırken Firefox DevTools'ta Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Kaydı durdurun. Basamaklı listede Recalculate Style (Stili Yeniden Hesapla) için herhangi bir giriş olmadığını görmeniz gerekir. Artık bu animasyonun stil yeniden hesaplamasına ve dolayısıyla düzen ve boyama işlemlerine neden olmadığını biliyorsunuz.
Firefox DevTools'ta kalarak bu animasyonun nasıl çalıştığını görmek için daireyi inceleyin.
pulsating-circle sınıfına sahip <div>, dairenin konumunu işaretler ancak dairenin kendisini ç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 sahte öğeleri kullanılarak elde edilir.
::before öğesi, pulse-ring adlı bir animasyon kullanarak beyaz dairenin dışına uzanan opak halkayı oluşturur. Bu animasyon, transform: scale ve opacity öğelerini animasyon haline getirir.
.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 DevTools'ta Animasyonlar panelini seçmektir. Ardından, kullanılan animasyonların ve animasyon uygulanan özelliklerin görselleştirilmiş halini görürsünüz.
Beyaz dairenin kendisi, ::after sözde öğesi kullanılarak oluşturulur ve animasyonlandırılır.
pulse-dot animasyonu, animasyon sırasında noktayı büyütmek ve 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);
}
}
Bunun gibi bir animasyon, uygulamanızın çeşitli yerlerinde kullanılabilir. Bu küçük dokunuşların uygulamanızın genel performansını etkilememesi önemlidir.
Pure CSS 3D Sphere
CodePen'de Pure CSS 3D Sphere'i görüntüleme
Bu animasyon inanılmaz derecede karmaşık görünse de önceki örneklerde gördüğümüz teknikleri kullanıyor. Karmaşıklık, çok sayıda öğenin animasyonundan 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 tellerden oluşur.
Bu düzlemler ve teller, <div> sarmalayıcısının içindedir ve transform: rotate3d kullanılarak döndürülen öğe 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çinde iç içe yerleştirilmiş olarak bulunur. Noktaları ölçeklendirmek ve çevirmek için dönüştürme kullanan bir animasyon kullanılır.
Bu, titreşimli efekti oluşturur.
.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 zamanlamayı doğru ayarlamak, dönme ve titreşim efektini oluşturmak için uğraştık. Animasyonlar oldukça basittir ve çok iyi performans gösteren yöntemler kullanılır.
Chrome Geliştirici Araçları'nı açıp çalışırken Performans'ı kaydederek bu animasyonun nasıl performans gösterdiğini görebilirsiniz. İlk yüklemeden sonra animasyon, düzen veya boyama işlemlerini tetiklemez ve sorunsuz bir şekilde çalışır.
Sonuç
Bu örneklerden, performanslı yöntemler kullanarak birkaç özelliği canlandırmanın nasıl çok güzel animasyonlar oluşturabileceğini görebilirsiniz. Animasyon kılavuzunda açıklanan yüksek performanslı yöntemleri varsayılan olarak kullanarak, sayfayı yavaşlatma endişesi olmadan istediğiniz efekti oluşturmaya zaman ayırabilirsiniz.