CSS animasyon kütüphaneleri, web sitenize etkileşimli ve görsel açıdan çekici animasyonlar eklemenizi sağlar. İşte işinize yarayacak ücretsiz CSS animasyon kütüphaneleri ve bunları nasıl kullanabileceğinize dair örnek kodları sizler için toparladım. Hiçbiri reklam değildir sadece kişisel öneridir.
1. Animate.css
Animate.css, hızlı ve kolay bir şekilde web projelerine animasyon eklemek için yaygın olarak kullanılan bir CSS kütüphanesidir. Entegrasyonu basit ve kullanımı da oldukça kolaydır.
- Hazır Animasyonlar: Fade, bounce, slide gibi birçok hazır animasyon içerir.
- Kolay Kullanım: Sadece animasyon sınıfını ekleyerek kullanılabilir.
- Esneklik: Animasyon süresi ve gecikme gibi ayarlar kolayca yapılabilir.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<div class="animate__animated animate__bounce">Merhaba Dünya!</div>2. Hover.css
Hover.css, özellikle butonlar ve bağlantılar üzerinde fare ile üzerine gelme (hover) efektleri eklemek için kullanabilirsiniz. Hafif yapısı sayesinde sayfa yüklenme hızını çok fazla etkilemez.
- Buton ve Link Animasyonları: Hover (üzerine gelindiğinde) animasyonlar sağlar.
- Minimal ve Hafif: Küçük dosya boyutuyla hızlı yüklenir.
- Kolay Entegrasyon: Sadece sınıfları ekleyerek buton ve link animasyonları elde edebilirsiniz.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<a href="#" class="hvr-grow">Buton</a>3. Magic Animations
Magic Animations, yaratıcı ve dikkat çekici CSS animasyonları sunan bir kütüphanedir. Web sitenizde eğlenceli ve farklı animasyon efektleri eklemek için kullanabilirsiniz.
- Yaratıcı Animasyonlar: Fade, rotate, slide gibi giriş ve çıkış animasyonlarını içerir.
- Özelleştirilebilir: Animasyon hızını ve efektini özelleştirebilirsiniz.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magic/1.1.0/magic.min.css">
<div class="magictime puffIn">Animasyon!</div>4. CSShake
CSShake, özellikle titreme ve sallama gibi animasyon efektleri üzerine odaklanan bir kütüphanedir.
- Shake Animasyonları: Özellikle titreme ve sallama efektlerini bulabilirsiniz.
- Hafif ve Minimal: Minimal kodla hızlı sonuç elde edebilirsiniz.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css">
<div class="shake-hard">Titreme Efekti!</div>5. Animista
Animista, kullanıcıların kendi animasyonlarını online olarak oluşturup özelleştirebileceği bir web sitesidir. Web üzerinden kolayca kendi CSS animasyonlarınızı tasarlayıp kullanabilirsiniz.
- Kişiselleştirilebilir Animasyonlar: Animasyonları seçip özelleştirme imkanı sunar.
- Online Araç: Online bir araç olarak animasyon oluşturma ve kodu alabilme imkanı sağlar.
Bu kütüphaneler ile projelerinize basit ve etkili animasyonlar ekleyebilirsiniz. İhtiyacınıza uygun olanı seçerek sitenizde animasyonları kolayca uygulayabilirsiniz.
Yorumlar