Bu gönderide, CodePen'de bulunan bazı popüler animasyonların nasıl oluşturulduğunu bulabilirsiniz. Bu animasyonların tümü, bu bölümdeki diğer makalelerde açıklanan performans tekniklerini kullanır.
Animasyonların arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? konusuna bakın. bu önerileri ve 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 animasyonun tamamı CSS ve HTML'de oluşturuldu. resim veya JavaScript kullanmayın. 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ı'nı kullanarak animasyonu inceleyin
Animasyon çalışırken Chrome Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Özet bölümünde, bu animasyonu çalıştırırken tarayıcının herhangi bir Düzen veya Boyama işlemi yapmadığını görmeniz gerekir.
Bu animasyonun düzene ve boyamaya neden olmadan nasıl yapıldığını öğrenmek için Chrome Geliştirici Araçları'nda hareketli öğeler olup olmadığını inceleyin. Animasyonlar Paneli'ni kullanarak çeşitli animasyonlu öğeleri bulabilirsiniz. herhangi bir öğeyi tıkladığınızda öğe DOM'de vurgulanır.
Örneğin, üçgeni seçin, ve elementin kutusunun havaya doğru yolculuğu sırasında nasıl dönüştüğünü izleyebilirsiniz. ardından başlangıç konumuna geri dönüyor.
Öğe hâlâ seçiliyken Stiller Paneli'ne bakın. Burada üçgenin şeklini çizen CSS'yi görebilirsiniz. ve kullanılan animasyon.
İşleyiş şekli
Üçgen, üretilen içeriği eklemek için ::after sözde öğesi kullanılarak oluşturulur,
kenarlıkları kullanarak şekli oluşturabilirsiniz.
.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ı'ndayken, Stil Paneli'ni aşağı kaydırarak animasyon karelerini bulabilirsiniz.
Burada, öğenin konumunu değiştirmek ve döndürmek için transform kullanılarak animasyonun oluşturulduğunu göreceksiniz.
transform özelliği, Animasyon Kılavuzu'nda açıklanan özelliklerden biridir.
Bu, tarayıcının düzen veya boyama işlemleri yapmasına neden olmaz (bunlar yavaş animasyonların ana nedenleridir).
@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 edilir.
Yanıp Sönen Daire
CodePen'de Titreşen Daireyi Görüntüle
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ı'nı kullanarak animasyonu inceleyin
Animasyon çalışırken Firefox Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Kaydı durdurun, sayfasında Stili Yeniden Hesapla için herhangi bir giriş olmadığını görürsünüz. Artık bu animasyonun stilin yeniden hesaplanmasına neden olmadığını biliyorsunuz. Böylece düzen ve boyama işlemleri yapılabilir.
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 işaret eder.
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 öğeleri kullanılarak gerçekleştirilir.
::before öğesi, beyaz dairenin dışına uzanan opak bir halka oluşturur.
pulse-ring adlı bir animasyon kullanarak
transform: scale ve opacity canlandırılıyor.
.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ı'ndaki Animasyonlar panelini seçmektir. Ardından, kullanılan animasyonların görselleştirilmiş ve animasyonlu özellikler.
Beyaz dairenin kendisi oluşturulur ve ::after sözde öğesi kullanılarak canlandırılır.
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.
Sadece CSS 3D Küresi
CodePen'de Pure CSS 3D Sphere'i görüntüleme
Bu animasyon son derece karmaşık. ancak önceki örneklerde gördüğümüz teknikleri kullanır. 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, bir dizi dönen uçak ve koldan oluşur.
Bu uçaklar ve uçlar bir ambalajın içindedir <div>.
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ç içe yerleştirilmiş şekilde bulunabilir.
bunları ölçeklendirmek ve çevirmek için dönüştürmeyi kullanan bir animasyon kullanıyorlar.
Bu şekilde yanıp sönme efekti 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 animasyonu oluşturmak için gereken zaman, doğru zamanlama, özelliğini oluşturun. Animasyonların kendisi de oldukça basit, ve oldukça iyi performans gösteren yöntemler kullanmanız gerekir.
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, Layout veya Paint'i tetiklemez, ve sorunsuz ç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. Varsayılan olarak, Animasyonlar kılavuzunda açıklanan performans gösteren yöntemlere ayarlanır. Zamanınızı sayfayı yavaşlatma konusunda daha az endişeyle istediğiniz efekti oluşturmak için harcayabilirsiniz.