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 yüksek performanslı teknikleri kullanır.
Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaştır? başlıklı makaleyi, pratik ipuçları için de 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 animasyon CSS ve HTML ile oluşturulmuştur. Resim veya JavaScript yoktur. Nasıl oluşturulduğunu ve ne kadar iyi performans gösterdiğini anlamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz.
Animasyonu Chrome Geliştirici Araçları ile inceleme
Animasyon çalışırken Chrome Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Özet bölümünde, 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.
Bu animasyonun, sayfa düzeni ve boyama işlemine neden olmadan nasıl oluşturulduğunu öğrenmek için Chrome Geliştirici Araçları'nda hareket eden öğelerden herhangi birini inceleyin. Çeşitli animasyonlu öğeleri bulmak için Animasyonlar Paneli'ni kullanabilirsiniz. Bir öğeyi tıkladığınızda DOM'da vurgulanır.
Örneğin, üçgeni seçin ve öğenin kutusunun havaya doğru yolculuğu sırasında nasıl dönüştüğünü, döndüğünü ve ardından başlangıç konumuna nasıl döndüğünü izleyin.
Öğe hâlâ seçiliyken Stiller Paneli'ne 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, şekli oluşturmak için de 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 kalarak Stil Paneli'ni aşağı kaydırarak anahtar kareleri bulabilirsiniz.
Burada, öğenin konumunu değiştirmek ve döndürmek için transform kullanılarak animasyon oluşturulduğunu görürsünüz.
transform özelliği, Animasyon Kılavuzu'nda açıklanan özelliklerden biridir ve tarayıcının düzen veya boyama işlemleri yapmasına (yavaş animasyonların ana nedenleridir) 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ıyor. Sonuç olarak sorunsuz çalışan karmaşık bir animasyon elde edersiniz.
Titreşen Daire
CodePen'de Titreşen Daireyi Görüntüleme
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öreceksiniz. Bu animasyonun stilin yeniden hesaplanmasına ve dolayısıyla da düzen ve boyama işlemlerine neden olmadığını artık biliyorsunuz.
Firefox Geliştirici Araçları'nda kalarak bu animasyonun nasıl çalıştığını görmek için daireyi inceleyin.
pulsating-circle sınıfına sahip <div>, dairenin konumunu belirler ancak
kendisi bir 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 elde edilir.
::before öğesi, transform: scale ve opacity öğelerini animasyonlu hale getiren pulse-ring adlı bir animasyon kullanarak beyaz dairenin dışına uzanan opak halkayı oluşturur.
.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ştirmesini görürsünüz.
Beyaz daire, ::after sözde öğesi kullanılarak oluşturulur ve animasyonlu hale getirilir.
pulse-dot animasyonu, animasyon sırasında noktayı büyütmek ve küçültmek için transform: scale boyutunu 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.
Saf CSS 3D Küre
CodePen'de Pure CSS 3D Küre'yi görüntüleme
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 öğenin animasyonlu olmasından kaynaklanır.
Chrome Geliştirici Araçları'nı açın ve plane sınıfına sahip öğelerden birini seçin.
Küre, bir dizi dönen uçak ve koldan oluşur.
Bu düzlemler ve kollar bir <div> sarmalayıcısının içindedir ve transform: rotate3d kullanılarak dönen bu öğedir.
.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 bulunabilir. Bu noktalar, ölçeklendirmek ve taşımak için dönüşüm kullanan bir animasyon kullanır.
Bu, titreşim etkisini 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, dönme ve titreşim efektini oluşturmak için zamanlamayı doğru ayarlamak gerekiyordu. Animasyonlar oldukça basittir ve çok iyi performans gösteren yöntemler kullanır.
Chrome Geliştirici Araçları'nı açıp animasyon çalışırken Performans'ı kaydederek bu animasyonu nasıl performans gösterdiğini görebilirsiniz. İlk yükleme işleminden sonra animasyon, düzeni veya boyamayı tetiklemez ve sorunsuz bir şekilde çalışır.
Sonuç
Bu örneklerden, birkaç özelliği yüksek performans gösteren yöntemlerle animasyon yapmanın harika animasyonlar oluşturabileceğini görebilirsiniz. Animasyon kılavuzunda açıklanan yüksek performanslı yöntemleri varsayılan olarak kullanarak sayfayı yavaşlatma konusunda daha az endişe duyarak istediğiniz efekti oluşturabilirsiniz.