Bu gönderide, CodePen'de bulunan bazı popüler animasyonların nasıl oluşturulduğunu öğrenebilirsiniz. Bu animasyonların tümü, bu bölümdeki diğer makalelerde ele alınan etkili teknikleri kullanır.
Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? bölümüne bakın ve pratik ipuçları için Animasyonlar Kılavuzu'na bakın.
Sihirbaz yükleme animasyonu
CodePen'de yükleme animasyonunu görüntüleme
Bu yükleme animasyonu tamamen CSS ile oluşturulmuştur. Resim ve animasyonun tamamı CSS ve HTML kullanılarak 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.
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örmeniz gerekir.
Bu animasyonun düzen ve boyaya neden olmadan nasıl yapıldığını öğrenmek için Chrome Geliştirici Araçları'nda hareketli öğeleri inceleyin. Çeşitli animasyonlu öğeleri bulmak için Animasyonlar Paneli'ni kullanabilirsiniz. Herhangi bir öğeyi tıkladığınızda öğe DOM'de vurgulanır.
Örneğin, üçgeni seçin ve öğe kutusunun havaya yolculuğu sırasında nasıl dönüştüğü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 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ırsanız Stil Paneli'ni aşağı kaydırarak animasyon karelerini bulabilirsiniz.
Burada, öğenin konumunu değiştirmek ve döndürmek için transform işlevi kullanılarak animasyon oluşturulduğunu görürsünüz.
transform özelliği, Animasyon Kılavuzu'nda açıklanan özelliklerden biridir. Bu özellik, 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ç, sorunsuz çalışan karmaşık bir animasyondur.
Parlayan Daire
CodePen'de Yanıp Sönen 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.
Animasyonu Firefox Geliştirici Araçları ile 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 girişi olmadığını göreceksiniz. Artık bu animasyonun stilde yeniden hesaplamaya neden olmadığını, dolayısıyla düzen ve boyama işlemlerine yol açmadığını biliyorsunuz.
Firefox Geliştirici Araçları'nda kalmak için daireyi inceleyerek bu animasyonun nasıl çalıştığını görebilirsiniz.
pulsating-circle sınıfına sahip <div>, çemberin konumunu işaretler ancak kendisi 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 öğeler kullanılarak oluşturulur.
::before öğesi, transform: scale ve opacity animasyonlarını canlandıran pulse-ring adlı animasyon kullanarak beyaz dairenin dışına çıkan 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 canlandırıldığını görmenin bir başka yolu da Firefox Geliştirici Araçları'nda Animasyonlar panelini seçmektir. Daha sonra, kullanılan animasyonların ve animasyon uygulanmakta olan özelliklerin bir görselini görürsünüz.
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ütmek ve küçültmek için transform: scale kullanıyor.
.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 bölümlerinde kullanılabilir. Bu küçük dokunuşların, uygulamanızın genel performansını etkilememesi önemlidir.
Sadece CSS 3D Küresi
CodePen'de Saf CSS 3D Küresini 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 canlandırılması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 düzlemden ve parmak ucundan oluşur.
Bu düzlemler ve uçlar, bir <div> sarmalayıcı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çine yerleştirilmiştir. Bunları ölçeklendirmek ve çevirmek için dönüştürme tekniğini kullanan bir animasyon kullanılır.
Bu şekilde yanıp sönen efekt oluşturulur.
.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 animasyonun oluşturulmasıyla ilgili çalışma, zamanlamayı doğru ayarlamak, döndürme ve yanıp sönme efektini oluşturmak oldu. Animasyonların kendisi oldukça basit ve çok iyi performans gösteren yöntemler kullanıyor.
Chrome Geliştirici Araçları'nı açıp çalışırken Performans'ı kaydederek bu animasyonun nasıl performans gösterdiğini görebilirsiniz. İlk yükleme işleminden sonra animasyon, Layout'u veya Paint'i tetiklemez ve sorunsuz çalışır.
Sonuç
Bu örneklerden, etkili yöntemler kullanarak birkaç özellikte animasyon yapmanın nasıl harika animasyonlar oluşturabileceğini görebilirsiniz. Animasyonlar kılavuzunda açıklanan etkili yöntemleri varsayılan olarak uygulayarak zamanınızı, sayfayı yavaşlatma konusunda daha az endişeyle istediğiniz efekti oluşturmaya ayırabilirsiniz.