Bu makale, çok adımlı animasyonlar ve geçişler ekleme sürecini göstermektedir.
Çok Adımlı Animasyonlar ve Geçişler Nasıl Kullanılır?
Çok adımlı bir animasyon yapmak için bir dizi anahtar kare oluşturulur. Seçilen HTML öğesine uygulanacak değişiklik dizisini belirtir. Her anahtar kare, animasyonun farklı bir durumunu temsil eder ve tarayıcı, öğeyi bu durumlar arasında sorunsuz bir şekilde değiştirir. Geçişler sırasında, belirli bir süre boyunca kullanıcı etkileşimleri veya durum değişiklikleriyle CSS özelliklerinin yumuşak değişimini belirtin.
Daha iyi anlamak için pratik bir örnek üzerinden gidelim:
Örnek 1: Çok Adımlı Animasyonu Uygulama
Bu örnekte, seçilen HTML öğesine çok adımlı bir animasyon uygulanacaktır. Aşağıdaki gösterimi ziyaret edin:
< stil >
.animasyonÖrnek {
genişlik: 130 piksel;
yükseklik: 130 piksel;
arka plan rengi: orman yeşili;
konum: göreli;
animasyon: moveAnimate 4s kolay giriş sonsuz;
}
< / stil >
< vücut >
< div sınıf = 'animasyon Örneği' >< / div >
< / vücut >
Yukarıdaki kod parçacığında:
- İlk olarak, “adlı sınıf animasyonÖrnek ”, “ içinde seçilir
' etiket. - Ardından, “ değerleri 130 piksel ”, “ yükseklik ' Ve ' Genişlik ' özellikler.
- Ayrıca, “ Orman yeşili ' Ve ' akraba ” için bir değer olarak arka plan rengi ' Ve ' konum ” görselleştirmeyi geliştirmek için özellikler.
- Bundan sonra, “ animasyon ” özelliği ve “ olarak ayarlayın moveAnimate 4s sonsuz kolay giriş ” animasyonları uygulamak için.
- Değer dört bölümden oluşur, birincisi özel isim animasyonu, ikincisi tamamlanma süresi, üçüncüsü animasyon türü ve dördüncüsü bu animasyonun kaç kez uygulanacağının sınırıdır.
- Sonunda, bir HTML öğesi oluşturun ve “ animasyonÖrnek ” sınıfına.
Şimdi, “ ana kareler ' özel tanımlama kuralı ' hareket et ” animasyon:
@ moveAnimate ana kareleri {0 % {
sol: 0 ;
arka plan rengi: mavi;
}
elli % {
sol: 200 piksel;
arka plan rengi: orman yeşili;
dönüştürmek: döndürmek ( 180 derece ) ;
}
100 % {
sol: 0 ;
arka plan rengi: mavi;
}
}
Yukarıdaki kod bloğunda:
- İlk önce ' @keyframes ” bloğu, tanımlanacak olan özel animasyonun adı ile birlikte oluşturulur.
- Ardından, “ adlı bir blok oluşturun. %0 ”, animasyonun başında CSS stillerini uygular. Ve “ arka plan rengi ' Ve ' sol ” CSS özellikleri.
- Şimdi, adında bir blok oluşturun ve “ elli% ” animasyonun ortasında stil vermek için. “” değerlerini sağlar. 200 piksel ”, “ Orman yeşili ' Ve ' döndürme(180 derece) ”, “sol”, “arka plan rengi” ve “dönüştür” özelliklerine. Bu, seçilen öğenin sola 200 piksel dönmesine izin verir.
Yukarıdaki kod bloğunun derlenmesinden sonra:
Çıktı, çok adımlı animasyonun seçilen HTML öğesine uygulandığını gösterir.
Örnek 2: Çok Adımlı Geçişi Uygulama
Çok adımlı geçişi uygulamak için, “ ile birlikte CSS seçicileri kullanılabilir. geçiş ' mülk. Aşağıdaki kodu ziyaret edin:
.solmak {
opaklık: 1;
geçiş: opaklık 1s;
}
.fade: üzerine gelin {
opaklık: 0;
}
<
/ stil>
<
vücut>
< P sınıf = 'solmak' > Geçişi görmek için üzerime gelin. < / P >
< / vücut >
Yukarıdaki kodun açıklaması:
- Birincisi, gelenek “ solmak ” sınıfı seçilir ve “ sınıfına 1 değeri verilir. opaklık ' mülk. Ayrıca, “ değerini ayarlayın. opaklık 1s ” “a geçiş ” CSS özelliği. Bu, '' süresi boyunca opaklığı ayarlar veya kaldırır. 1 saniye ”.
- Sonra, “ :vurgulu ” seçici, “ solmak ' sınıf. İçinde, “değeri 0 ” opaklık özelliğine ayarlanır.
- Sonunda, HTML öğesi “ içinde oluşturulur.
” etiketi ve “ sınıfı solmak ” eklidir.
Derleme aşamasının bitiminden sonra web sayfası şöyle görünür:
GIF, seçilen HTML öğesine özel soldurma geçişinin uygulandığını gösterir.
Çözüm
Çok adımlı animasyonlar ve geçişler, hareket ve görsel efektler ekleyerek HTML web sayfalarına hayat verir. Animasyon için “ ana kareler ” gibi süre yüzdesi ile birlikte kullanılır. %0 ” başlangıçtır, “ elli% ” orta ve “ 100% ”, animasyon süresinin sonudur. Geçiş için, “ ile birlikte CSS seçici kullanılabilir. geçiş ' sınıf. Bu makale, çok adımlı animasyonları ve geçişleri kullanma sürecini göstermiştir.