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ş? konusuna ve pratik ipuçları için Animasyon Kılavuzu'na bakın.
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 bir elementin kutusunun havaya doğru dönerken nasıl dönüştüğünü ve sonra başlangıç konumuna döndüğünü izleyin.
Öğe hâlâ seçiliyken Stil 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, ş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 animasyonun oluşturulduğunu göreceksiniz.
transform mülkü, Animasyonlar Kılavuzu'nda açıklanan özelliklerden biridir. Bu mülk, tarayıcıda sayfa düzeni veya boyama işlemlerinin yapılmasına neden olmaz (yavaş animasyonların başlıca 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 bölümlerinin her biri benzer teknikler kullanır. Sonuç olarak sorunsuz çalışan karmaşık bir animasyon elde edersiniz.
Yanıp Sönen Daire
CodePen'de Titreşen Daireyi Görüntüleme
Bu animasyon türü 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 DevTools'ta 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 DevTools'da 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 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 animasyonlarını canlandıran pulse-ring adlı bir animasyon kullanarak beyaz dairenin dışına uzanan opak bir halka 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);
}
}
Bu tür 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ü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 öğeye animasyon eklemekten 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 bir dizi düzlem ve koldan oluşur.
Bu düzlemler ve kollar bir <div> sarmalayıcı 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üklemeden sonra animasyon, Layout veya Paint'i tetiklemez ve sorunsuz çalışır.
Sonuç
Bu örneklerde, birkaç mülkü yüksek performanslı yöntemler kullanarak animasyon haline getirmenin nasıl çok etkileyici 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.