Bu makale, birden fazla CSS animasyonunu aynı anda oynatmak/eklemek için pratik bir gösteri göstermektedir.
Aynı Anda Birden Fazla CSS Animasyonu Nasıl Oynanır?
Geliştiriciler aynı anda birden fazla CSS animasyonu uygulayarak daha ilgi çekici arayüzler oluşturabilirler. Birçok CSS animasyonunu aynı anda oynatmak için her birine benzersiz bir ad verin ve bu adları sayfadaki aynı veya ayrı bileşenlere uygulayın.
Birden fazla animasyonu aynı anda oynatmak/eklemek için aşağıdaki prosedürü izleyin.
Adım 1: Yapının Oluşturulması
İlk olarak, sonraki adımlarda animasyonların uygulanacağı bir HTML öğesi oluşturun. Örneğin, resim eklenecek:
< div sınıf = 'açıklık' >
< img kaynak = 'kitap.jpg' yükseklik = '100 piksel' Genişlik = '100 piksel' sınıf = 'canlandırmak' >
< / div >
Yukarıdaki kod parçacığında:
- İlk olarak, görüntü yolu “ olarak ayarlanmıştır. kaynak ' bağlanmak.
- Ardından, “ değeri 100 piksel ”, CSS “genişlik” ve “yükseklik” özelliklerine sağlanır.
- Ayrıca, “ değerini ayarlayın. canlandırmak ” “a sınıf ' bağlanmak.
2. Adım: Animasyonları Ayarlama
“ ana kareler ” web sayfasının ihtiyacına göre özel animasyonlar oluşturmak için kullanılır. Örneğin, aşağıdaki kod parçacığında iki animasyon oluşturulur:
@-webkit-keyframes dönüşü {100 % {
dönüştürmek: döndürmek ( 180 derece ) ;
}
}
@-webkit-keyframes ölçeği {
100 % {
dönüştürme: ölçekX ( 1 ) ölçekY ( 1 ) ;
}
}
Yukarıdaki kod parçacığında:
- İlk önce ' @-webkit-anahtar kareler “kurmak için mekanizma kullanılıyor” döndürmek ' Ve ' döndür ” adlı animasyonlar.
- Ardından, “ dönüştürmek 'değerine sahip özellik' döndür() ' içinde ' döndürmek ” animasyon gövdesi. Bu işlev, elemanı '' açısında döndürür. 180 derece ”.
- Bundan sonra, orijinal öğeyi büyüten veya genişleten animasyonu “ faktörü ile ayarlayın. 1 her ikisinde de X ' Ve ' VE ” eksenindeki “ ölçek ” animasyon gövdesi.
3. Adım: Animasyonu HTML Öğelerine Uygulamak
CSS bölümünün içinde, “ sınıfını seçin canlandırmak ' atanan ' ” etiketi ve aşağıdaki CSS özelliklerini sağlayın:
pozisyon: mutlak;
sol: 60 %;
Genişlik : 110 piksel;
yükseklik : 110 piksel;
kenar boşluğu: -40 piksel 0 0 -40 piksel;
-webkit-animasyon: ölçek 3s sonsuz doğrusal;
-webkit-animasyon: 2 sn sonsuz lineer döndürme;
}
Yukarıdaki kod bloğunda kullanılan özelliklerin açıklaması:
- İlk olarak, “ değerini ayarlayın mutlak ” CSS'ye “ konum ' mülk. “ img ” öğesi animasyona göre.
- Ardından, ' değerlerini sağlayın %60 ”, “ 110 piksel ' Ve ' 110 piksel ” CSS'ye “ sol ”, “ Genişlik ' Ve ' yükseklik ' özellikler. Bu özellikler, bir elemanın konumunu ve boyutunu ayarlamak için kullanılır.
- Bundan sonra, “değerini ayarlayın. ölçek 3s sonsuz doğrusal ” “a -webkit-animasyon ” CSS özelliği.
- Ve ' 3s ” o animasyonun süresi, “ sonsuz ”, animasyonun süresidir ve “ doğrusal ” animasyonun yönüdür.
- Sonunda, ' değerlerini sağlayın spin 2s sonsuz lineer ” CSS'ye “ -webkit-animasyon ' mülk. Bu özellik, “ adlı ikinci animasyonu ekler. döndürmek ' üzerinde ' img ” öğesi.
Yukarıdaki kod bloğunun derlenmesinden sonra animasyon şöyle görünür:
Yukarıdaki gif, yalnızca “ döndürmek ” animasyonu hedeflenen öğe üzerinde oynatılıyor.
4. Adım: HTML Öğelerinde Birden Çok Animasyon Oynatma
Yukarıdaki adımda olduğu gibi, öğeye yalnızca bir animasyon uygulanmıştır. Bunun nedeni, aynı “ için birden çok değerin atanmasıdır. -webkit-animasyon ' mülk.
Bu sorunu çözmek için hedef öğeyi başka bir HTML öğesiyle sarın. “ olarak div ” zaten ilk adımda sarmalayıcı olarak kullanılıyorsa, “ öğesini seçin. açıklık ” ve şu şekilde kodu güncelleyin:
.canlandır {pozisyon: mutlak;
sol: 60 %;
Genişlik : 110 piksel;
yükseklik : 110 piksel;
kenar boşluğu: -40 piksel 0 0 -40 piksel;
-webkit-animasyon: ölçek 3s sonsuz doğrusal;
}
. açıklık {
konum: göreli;
üst: 160 piksel;
-webkit-animasyon: 2 sn sonsuz lineer döndürme;
}
Yukarıdaki kodda:
- İlk başta, “ canlandırmak ” sınıfı aynı kalır ve ondan yalnızca “ sınıfına yerleştirilen ikinci animasyon kaldırılır. açıklık ' sınıf.
- Bundan sonra, “ düğmesini kullanarak konumu ayarlayın. konum ' Ve ' tepe ' özellikler.
Yukarıdaki kod parçacığının yürütülmesinden sonra web sayfası şu şekilde görünür:
Çıktı, her iki animasyonun da seçilen HTML öğesine aynı anda uygulandığını gösterir.
Çözüm
Birden çok CSS özelliği uygulamak için öğeyi HTML öğeleriyle sarın ve her HTML öğesinin tek bir animasyonu içermesi için bunlara animasyonlar uygulayın. Child özelliği, üst HTML öğesine uygulanan animasyonu devraldığından, derleyici için hatalara veya belirsizliğe neden olmadan birden çok animasyon uygulanır. Aynı anda birden fazla CSS animasyonu oynatma/ekleme prosedürü budur.