HTML dili, web sayfasının yapısını sağlar ve CSS, bu uygulamanın tasarımını ve biçimlendirmesini sağlar. Animasyonlu öğeler statik öğelere kıyasla daha çekici göründüğünden, bu kombinasyon ayrıca animasyon eklemenize olanak tanır. Ayrıca bir öğenin stilini kademeli olarak değiştirmesine izin verir.
Bu makale, animasyonu öğelere nasıl uygulayabileceğimize rehberlik edecek. Öyleyse başlayalım!
CSS Animasyon Ana Kareleri nedir?
Animasyonu tamamlamak için animasyonu HTML öğesine bağlamamız gerekir. Bunun için “ anahtar kelimesini kullanın. @keyframes ” ardından animasyon adı gelir. Bu bileşen, animasyonun başlangıcını ve bitişini belirtir.
CSS Animasyon Ana Kareleri Nasıl Kurulur?
Animasyon ana karelerini CSS'de ayarlamak için iki örnek üzerinden gideceğiz.
örnek 1
Animasyon ana karelerini CSS'de ayarlamak için aşağıdaki adımları gerçekleştirin:
-
- “ sınıf adına sahip bir ekleyin ana-div ”.
- Div'in içine, “ sınıf adıyla başka bir div ekleyin. img-peng ”.
- Bu img-peng div içine, görüntüyü yerleştirmek için
ekleyin. Bu etiketin üç özelliği vardır, “ kaynak ” görüntü yolunu sağlamak için öznitelik, “ her şey ”, resim görüntülenmiyorsa eklenen alternatif metindir ve “ Genişlik Görüntünün genişliğini sağlamak için ” özniteliği.
HTML
< div sınıf = 'ana div' >
< div sınıf = 'img-peng' >
< img kaynak = 'resimler/penguen.png' her şey = 'penguen' Genişlik = '100' >
div >
div >
.main-div {
CSS
Genişlik: 90 % ;
yükseklik: 90 piksel;
arka plan rengi: rgb ( 67 , 66 , 87 ) ;
kenar boşluğu: 20px otomatik;
dolgu: 10 piksel;
}
CSS'de “ .main-div ” div sınıfına erişmek için eklenir. Uygulanan özellikler aşağıda açıklanmıştır:-
- “ Genişlik ” özellik değeri, div'in genişliğini tanımlar.
- “ yükseklik ” özelliği, div'in yüksekliğini ayarlamak için kullanılır.
- “ arka plan rengi ” özelliği, öğenin arka planına renk uygular.
- “ marj ”, “ olarak ayarlanır 20 piksel araba ”, üstten ve alttan boşluğu belirtir ve auto, soldan ve sağdan eşit boşluk anlamına gelir.
- “ dolgu malzemesi ” özellik değeri, öğenin içeriğinin etrafına boşluk uygulayan 10px olarak atanır.
Stil img-peng sınıfı
.img-peng {
genişlik: 50 piksel;
yükseklik: 100 piksel;
konum: göreli;
animasyon: sallamak;
animasyon süresi: 2 sn;
animasyon-zamanlama-fonksiyonu: 2s;
animasyon yineleme sayısı: sonsuz;
}
“ .img-peng ”, yukarıdaki HTML dosyasında bahsedilen div sınıfına erişmek için kullanılır. Bu div öğesi, aşağıda tartışılan özelliklerle biçimlendirilmiştir:-
- “ Genişlik ” özellik değeri, öğenin genişliğini ayarlamak için kullanılır.
- “ yükseklik ” özellik değeri, elemanın yüksekliğini ayarlamak için kullanılır.
- “ durum ” özelliğine değer atanır “ akraba ”, bu da normal konumuna göre konumlandırılacağı anlamına gelir.
- “ animasyon ” adı “ olarak verilir. sallamak ”. Ancak, animasyonu ihtiyaca göre adlandırabilirsiniz.
- “ animasyon süresi ”, animasyonun 2 saniye olan süresini temsil eder.
- “ animasyon-zamanlama-fonksiyonu ”, 2s değeri atanır, yani 2 saniyede animasyon tamamlanır.
- “ animasyon yineleme sayısı ”, sonsuz olarak ayarlanmıştır, bu, bu animasyonun sonsuz zamanda gerçekleşeceği anlamına gelir.
@keyframes'i Anahtar kelimelerle ve anahtar kelimelerle tanımlayın
@ anahtar kareler sallamak {
itibaren {
üst: 50 piksel;
}
ile {
kenar boşluğu: 200 piksel;
}
}
Resme ayarlanan animasyon ana karelerinin açıklaması aşağıda listelenmiştir:-
- “ @keyframes sallamak ”, @keyframes anahtar kelimesinin izlediği animasyon adı sarsıntısını ifade eder. Bu kural içerisinde animasyonun davranışı belirtilir.
- Kıvrımlı parantez içinde, “ itibaren ' ve ' ile ” anahtar sözcükleri, animasyon davranışını tanımlamak için farklı aralıklar belirtir.
- “ tepe ” özelliğine 50px değeri atanır, yani animasyon ekranın üst kısmından 50px'den başlar ve alt kısımda 200px'e kadar devam eder.
Sonuç olarak, aşağıdaki çıktıyı göreceksiniz:
Şimdi animasyonun farklı aralıklarla farklı davranmasına izin verin. Bunu yapmak için, @anahtar karelerdeki animasyon yüzdelerini kullanın.Yüzdelerle @keyframes belirtin
@ anahtar kareler sallamak {
0 % {
ayrıldı: -50 piksel ;
}
25 % {
sol: 50 piksel;
}
elli % {
ayrıldı: -25 piksel ;
}
75 % {
sol: 25 piksel;
}
100 % {
sol: 10 piksel;
}
}
Bu nedenle, yukarıdaki kod parçacığının açıklaması burada belirtilmiştir:-
- %0, %25, %50, %75 ve %100 yüzde değerleri animasyonu farklı aralıklarla temsil eder.
- Üstelik %0'da görüntünün solundaki boşluk “ -50 piksel ”. %25'te soldaki boşluk ' 50 piksel ”. %50'de soldaki boşluk ' -25 piksel ”. %75'te kalan boşluk “ olacaktır. 25 piksel ”, ve animasyon tamamlandığında (%100), kalan boşluk “ 10 piksel ”.
Yukarıdaki kod aşağıdaki animasyonu görüntüler:
Resimlere animasyonları nasıl ayarlayabileceğimizi görmek için başka bir örnek verelim.Örnek 2
HTML'de, “ sınıf adına sahip bir
ekleyin. ana Sayfa ”. Buöğesinin içine, “ sınıflarıyla birlikte iki div etiketi daha yerleştirin. bulut1 ' ve ' bulut2 ', sırasıyla.HTML
< div sınıf = 'ana Sayfa' >
< div sınıf = 'bulut1' > div >
< div sınıf = 'bulut2' > div >
div >
gövde {
CSS
marj: 0 ;
dolgu malzemesi: 0 ;
}
CSS'de, body öğesine aşağıdaki CSS özelliklerini atayacağız:-
- “ marj ” özelliği, 0 olarak öğenin etrafında boşluk olmadığını belirtir.
- “ dolgu malzemesi 0 değerine sahip ' özelliği, öğenin içeriğinin çevresinde boşluk olmadığını belirtir.
Stil ana sayfa div
.ana Sayfa {
arka plan resmi: url ( / Görüntüler / kurt gecesi.png ) ;
arka plan tekrarı: tekrar yok;
arka plan boyutu: kapak;
yükseklik: 100vh;
konum: göreli;
taşma: gizli;
}
Burada:-
- “ .ana Sayfa ” div sınıfına erişmek için kullanılır.
- “ arka plan görüntüsü ” özelliğine değer atanır “ url(/resimler/kurt-gecesi.png) ” burada resimler wolf-night.png resmini içeren klasördür.
- “ arka plan tekrarı ” özelliğine değer atanır “ tekrarsız , bu, görüntünün bir kez gösterileceği anlamına gelir.
- “ arka plan boyutu ”, “ olarak ayarlanır örtmek ” tüm div öğesini doldurmak için.
- “ yükseklik ”, 100vh'dir ve bu, görünümün yüksekliğinin %100'üdür.
- “ durum ' göreli olarak görüntü konumunu geçerli konumuna göre ayarlar.
- “ taşma ” özelliğinin değeri, görüntünün kaba sığmayacak kadar büyük olan kısmını gizlemek için gizli olarak ayarlanır.
Stil cloud1 sınıfı
.bulut1 {
arka plan resmi: url ( / Görüntüler / bulut.png ) ;
arka plan boyutu: içerir;
arka plan tekrarı: tekrar yok;
pozisyon: mutlak;
üst: 100 piksel;
genişlik: 500 piksel;
yükseklik: 300 piksel;
animasyon: cloudanimation1;
animasyon süresi: 70s;
animasyon yineleme sayısı: sonsuz;
}
div sınıfı cloud1, aşağıdaki açıklanan özelliklerle uygulanır:-
- “ .bulut1 ” div sınıfı cloud1'e erişmek için kullanılır.
- “ arka plan görüntüsü ” özelliği url(/images/cloud.png) olarak ayarlanır, burada resimler cloud.png resmini içeren klasördür.
- “ arka plan boyutu 'değeri ile' içermek ” görüntünün görünürlüğünü sağlar.
- “ arka plan tekrarı ' olarak ayarlanan değere sahip özellik' tekrarsız ”, görüntüyü tekrarlanmamış olarak görüntüler.
- “ durum ” mutlak olarak, görüntüyü ebeveyninin öğesine göre konumlandırır.
- “ tepe ” özelliği, görüntüyü üstten 100 piksel olarak ayarlar.
- “ Genişlik ” özelliği, div öğesinin genişliğini 500px olarak ayarlamak için kullanılır.
- “ yükseklik ” özelliği, div öğesinin yüksekliğini 300px olarak ayarlamak için kullanılır.
- “ animasyon ”, cloudanimation1 olarak adlandırılır.
- “ animasyon süresi ” animasyonun 70 saniye olan süresini temsil eder.
- “ animasyon yineleme sayısı ”, animasyonu sonsuz kez yineleyecek olan sonsuz değere atanır.
Şimdiye kadar, CSS özelliklerini ana sayfa div sınıfına ve cloud1'e uyguladık. Şimdi, bir sonraki bölümde, cloud2 adlı bir sonraki div sınıfını biçimlendireceğiz.
Stil cloud2 sınıfı
.bulut2 {
arka plan resmi: url ( / Görüntüler / bulut.png ) ;
arka plan boyutu: içerir;
arka plan tekrarı: tekrar yok;
pozisyon: mutlak;
üst: 50 piksel;
genişlik: 200 piksel;
yükseklik: 300 piksel;
animasyon: cloudanimation2;
animasyon süresi: 15 sn;
animasyon yineleme sayısı: sonsuz;
}
div sınıfı cloud2, aşağıda açıklanan özelliklerle uygulanır:-
- “ .bulut2 ”, cloud2 sınıfına erişmek için kullanılır.
- “ arka plan görüntüsü ” özelliği url(/images/cloud.png) olarak ayarlanır, burada görüntü cloud.png görüntüsünü içeren bir klasördür.
- “ arka plan boyutu ” bir değer içerir, görüntünün görünürlüğünü sağlar.
- “ arka plan tekrarı değeri tekrarsız olarak ayarlanan ” özelliği, görüntüyü tekrarsız olarak görüntüler.
- “ durum ” mutlak olarak, görüntüyü ebeveyninin öğesine göre konumlandırır.
- “ tepe ” özelliği, görüntüyü üstten 100 piksel olarak ayarlar.
- “ Genişlik ” özelliği, div öğesinin genişliğini ayarlamak için kullanılır.
- “ yükseklik ” özelliği, div öğesinin yüksekliğini ayarlamak için kullanılır.
- “ animasyon ”, cloudanimation2 olarak adlandırılır.
- “ animasyon süresi ”, animasyonun süresini temsil eder.
- “ animasyon yineleme sayısı ”, animasyonu sonsuz kez yineleyecek olan sonsuz değere atanır.
cloudanimation1 için @keyframes belirtin
@ anahtar kareler cloudanimation1 {
ile {
sol: 0 piksel;
}
itibaren {
ayrıldı: 100 % ;
}
}
cloud1 div, aşağıda açıklanan animasyonla bağlıdır:-
- “ @keyframes cloudanimation1 ” animasyon cloudanimation1 adının ardından geçişi belirtmek için kullanılan @keyframes anahtar kelimesi gelir.
- @keyframes anahtar sözcüğü, animasyonun bulut görüntüleri üzerinde baştan sona nasıl yapıldığını belirtir.
- “ ile ' ve ' itibaren ” anahtar sözcükleri, cloud1'in ekranın %100'den 0px'ine taşınacağını belirtir.
cloudanimation2 için @keyframes belirtin
@ anahtar kareler cloudanimation2 {
0 % {
ayrıldı: 0 % ;
}
100 % {
ayrıldı: 100 % ;
}
}
cloud2 div sınıfı, aşağıda açıklanan animasyonla ilişkilendirilir:-
- “ @keyframes cloudanimation2 ”, cloudanimation2 animasyon adını ve ardından animasyonu belirtmek için kullanılan @keyframes anahtar kelimesini temsil eder.
- “ %0 ' ve ' 100% ”, animasyonun başlangıcını ve sonunu temsil eder.
- Animasyonun %0'ında, bulut solda %0 olarak ayarlanan değerle olur ve yavaş yavaş genişliğin %100'üne geçer.
Çıktı
Çok havalı! @keyframes anahtar kelimesini başarılı bir şekilde kullanarak öğelere animasyonu nasıl belirtebileceğimizi tartıştık.Çözüm
CSS, HTML öğelerine stil uygulamamıza izin verir. CSS'deki animasyon, bir stilden diğerine geçişler gerçekleştirir. Animasyon stilleri ve ana kareler olmak üzere iki bileşenden oluşur. Animasyon stilleri, adları, animasyon süresi, animasyon yineleme sayısı ve daha fazlası gibi farklı özellikleri temsil eder. Anahtar kare bileşeni ise animasyonun başlangıcını ve sonunu tanımlar. Bu kılavuz, animasyon anahtar karelerinin nasıl ayarlanacağını örneklerle detaylandırdı.
- “ sınıf adına sahip bir