Animate.css birkaç yıldan beri oldu ve partiye oldukça geç kaldığımı kabul etmeliyim. Birkaç ay önce bazı CSS animasyon dersleri için interneti araştırırken keşfettim ve etrafta canlandırmanın en hızlı ve en basit yolu olan Animate.cs'i buldum.
Dan Eden adlı bir adam tarafından oluşturulan Animate.css, CCS'nin nasıl çalıştığını ve web sitenizde bazı animasyon işlemlerini gerçekleştirmenin hızlı bir yoludur.
'Sadece su ekle CSS animasyonu' olarak tanımlanan Animate.css, ciddi bir yanıyla eğlenceli. Kendim gibi amatör web tasarımcılarının bile, CSS animasyonunun temellerini çabucak kavramasını ve web siteleri için basit ama etkili efektler oluşturmasını sağlar. Tek bir animasyonlu başlıktan daha fazla ilgili harekete kadar, bu araç bunu yapabilir.
Animate.css
Animate.css GitHub'dan indirilebilir ve aslında tek bir yerde toplanan basit CSS efektleri kütüphanesidir. Her animasyon güzelce paketlenmiş ve kullanıma hazır. Tek yapmanız gereken sevdiğiniz animasyonu bulmak ve sınıfı uygulamak. Orada gerçekten hepsi bu.
İçinde 2, 500 kod satırı olduğundan kullanmak istemiyorsanız, kütüphanenin tamamını indirmek zorunda değilsiniz. Animate.css sitesini ziyaret edebilir, bir animasyon bulabilir ve Animate.css İndir bağlantısını tıklayabilirsiniz. Sınıfı uygun gördüğünüz şekilde kopyalayıp kullanabilmeniz için bir web sayfasına yükler.
GitHub'ı kullanmak daha kolay ve aradığınız efekti bulmak için delin.
- Css GitHub sayfasına gidin.
- Öğelerin listesine erişmek için Kaynak bağlantısını tıklayın.
- Listeden aradığınız efekt türünü seçin. Sıçrama bir dikkat arayandır, bu yüzden attention_seekers bağlantısını seçin.
- Bounce.css'yi seçin.
- Kodu kopyalayın ve animasyonu uygulamak için sayfanıza yerleştirin.
Gerçekten bu kadar basit. Açıkçası farklı efektler için farklı seçenekler seçecektiniz, ancak sonuç aynı. Sayfadaki ağır kaldırma işlemini yapmak için gereken koda erişin.
Animate.css ile animasyonlu bir nesne oluşturma
Animate.css ile havalı bir şeyler yapmak basittir. Bu sadece CCS kodunu bulma ve kendi CSS'inize ekleme meselesidir. Yapabilirsem, herkes yapabilir!
Animate.css sayfasındaki ilk seçenek sıçramadır, bu yüzden bunu bu örnekte kullanalım.
- Yapıştırmak ' 'içinde stil sayfanızda.
- İstediğiniz animasyon için CSS'yi bulun ve canlandırmak istediğiniz öğeye ekleyin. Örneğin, 'ekle 'Bu yansıma efektini test etmek, bir görüntü veya her neyse eklemek.
- Hepsini çalıştırmak için aşağıdaki CSS kodunu ekleyin. Yukarıdaki bounce.css'den alınmıştır.
@keyframes sıçrama {
% 20, % 53, % 80,
animasyon-zamanlama fonksiyonu: küp-bezier (0.215, 0.610, 0.355, 1.000);
dönüşümü: translate3d (0, 0, 0);
}
% 40, % 43
animasyon-zamanlama fonksiyonu: küp-bezier (0.755, 0.050, 0.855, 0.060);
dönüşüm: translate3d (0, -30px, 0);
}
% 70 {
animasyon-zamanlama fonksiyonu: küp-bezier (0.755, 0.050, 0.855, 0.060);
dönüşüm: translate3d (0, -15px, 0);
}
% 90 {
dönüşüm: translate3d (0, -4 piksel, 0);
}
}
.bounce {
animasyon adı: sıçrama;
dönüşüm-kökeni: orta alt;
}
Animate.css ile animasyonu daha da ileri götürün
Yukarıdaki sıra, sayfa ilk yüklendiğinde, yalnızca serin olan, ancak tek seferlik bir şey olan bir sıçrama efekti ekler. Onu gezdirmeye ekleyelim. Bu şekilde, biri testin üzerine getirildiğinde, zıplar. Bir üretim web sitesinde yapacağım bir şey değil, ama her şeyin nasıl çalıştığını göstermenin harika bir yolu.
Hemen çıkma efekti eklemek için aşağıdaki kodu CSS’nize ekleyin. Fare her elementin üzerine geldiğinde sıçraması gerekir.
.animated: hover {
-webkit-animasyon süresi: 1 sn;
-moz-animasyon süresi: 1 s;
-ms-animasyon süresi: 1 sn;
-o-animasyon süresi: 1 s;
animasyon süresi: 1 sn;
-webkit-animasyon-doldurma modu: her ikisi de;
-moz-animasyon-doldurma modu: her ikisi de;
-ms-animasyon-doldurma modu: her ikisi de;
-o-animasyon-doldurma modu: her ikisi de;
animasyon-doldurma modu: her ikisi de;
}
CSS'yi biliyorsanız, farklı etkilere farklı efektlerin nasıl uygulanacağı hakkında benden çok daha iyi bileceksiniz. Başlangıç olarak, bu ve Animate.cs'de sağlanan kütüphaneler, web sayfalarım için basit ama etkili animasyonlar oluşturmama yardımcı oluyor.
Canlı bir web sitesinde kaç kez kullanacağımı bilmiyorum, çünkü her zaman çok iyi gitmiyorlar ve mobil kullanıcılar onları pek sevmiyor gibi görünüyor. Ancak, CSS’nin nasıl çalıştığı ve web’i geliştirmek için nasıl kullanılabileceğine dair bir ders olarak harika bir kaynaktır. Ben sadece bir acemi değilim ama bu ders için Animate.css ile birkaç saat harcamak bile bana çok şey öğretti. Sanırım bitmeden çok daha fazla oynayacağım. Sen nasılsın?
