Animate.css library kullanımı
Havalı animasyonlar ve akıllı mikro etkileşimler şu anda çok popüler. Ancak, çoğu geliştirici sürekli CSS animasyonları yazmak ve yeniden yazmak için ne kadar uzun ve sıkıcı olabilir biliyorum. Tekerleği yeniden keşfediyor gibi hissetmeye başlayabilir. Herhangi bir proje için istediğiniz zaman çekebileceğiniz ortak animasyonlardan oluşan bir kütüphane olması hoş olmaz mıydı?
Anlamlı ve güzel CSS animasyonları oluşturmak zor ve zaman alıcı olabilir, ancak neyse ki yaratıcı sürecinizi hemen başlatmanıza yardımcı olacak bazı harika kaynaklar vardır. Bu makale'de CSS animasyon kütüphanesini inceleyeceğiz.
Animate.css , mevcut en küçük ve kullanımı kolay CSS animasyon kitaplıklarından biridir. Animate kitaplığını projenize uygulamak, CSS'yi bağlamak ve gerekli CSS sınıflarını HTML öğelerinize eklemek kadar basittir. İsterseniz, belirli bir etkinlikte animasyonları tetiklemek için javascript de kullanabilirsiniz.
Animate.css , Daniel Eden tarafından oluşturulan CSS animasyonlarının çapraz tarayıcı kütüphanesidir. 2019'dan itibaren kütüphane, websitenizdeki içeriği hızlı bir şekilde canlandırabilmenizi sağlayan 77 önceden oluşturulmuş animasyon içeriyor.
ANİMATE.CSS DOSYASI NEDİR?
Animate.css, projenizde çok kolay bir şekilde kullanabileceğiniz yerleşik tarayıcılar arası eğlenceli animasyonlarla birlikte gelen bir kütüphanedir.
ANİMATE.CSS KULLANMA
Animate.css ile çalışmaya başlamanın iki yolu vardır. İlk yol resmi web sitesinden indirmektir. Bunu yaptıktan sonra tek yapmanız gereken onu proje klasörünüze eklemek ve HTML'nize eklemektir.
Not: Animate.css yalnızca bir dosya içerir! Bu yükleme süresini en aza indirir ve her şeyi basit tutar.
Webcebir.com
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Başlamak için ikinci seçenek bir CDN kullanmaktır. Bunu burada bulabilirsiniz. Kodu aldıktan sonra, daha önce olduğu gibi bağlantı verebilirsiniz:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
Bir öğeyi canlandırmak için, bir öğeye animated
sınıf ekleyin. Sonsuz döngü için infinite
(sonsuz) sınıfı ekleyebilirsiniz. Son olarak öğeye aşağıdaki sınıflardan birini eklemeniz gerekir:
Class Name | |||
---|---|---|---|
bounce | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | bounceIn | bounceInDown |
bounceInLeft | bounceInRight | bounceInUp | bounceOut |
bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
fadeOutUp | fadeOutUpBig | flipInX | flipInY |
flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
rollIn | rollOut | zoomIn | zoomInDown |
zoomInLeft | zoomInRight | zoomInUp | zoomOut |
zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
heartBeat |
Full Örnek:
<h1 class="animated infinite bounce delay-2s">Example</h1>
ÇIKTI:
Example
Animasyonlarımızı bir kutuya uygulayalım.
.kare{
width:100px;
height:100px;
background-color:#e67e22
}
HTML:
<div class="kare"></div>
ÇIKTI:
Gecikme ve Hızı Ayarlama
Doğrudan öğenin sınıf özniteliğine gecikmeler eklemek mümkündür:
Sınıf Adı | Gecikme Süresi |
---|---|
delay-1s | 1s |
delay-2s | 2s |
delay-3s | 3s |
delay-4s | 4s |
delay-5s | 5s |
Örnek:
<h1 class = " animated bounce infinite delay-2s ">Örnek </h1>
ÇIKTI:
Örnek
Yavaş, Yavaş, Hızlı ve Daha Hızlı Sınıf
Aşağıdaki örnek olarak bu sınıfları ekleyerek animasyonun hızını kontrol etmek mümkündür:
Sınıf Adı | Hız Zamanı |
---|---|
slow | 2s |
slower | 3s |
fast | 800ms |
faster | 500ms |
animated
Sınıfın varsayılan hızı 1s. Özel süreye ihtiyacınız varsa, bunu doğrudan kendi CSS kodunuza ekleyin.
ÖRNEK
<h1 class = " animated bounce infinite speed "> Örnek </div>
ÇIKTI:
Örnek
Birkaç örnek yapalım:
ÖRNEK:
<h1 class="animated infinite jello delay-4s">Webcebir.com</h1>
ÇIKTI:
Webcebir.com
bounceOut
fonksiyona göre örnek:
<h1 class="animated infinite bounceOut delay-3s" >Webcebir.com</h1>
ÇIKTI:
Webcebir.com
zoomIn
fonksiyona göre örnek:
<h1 class="animated infinite zoomIn delay-2s">Webcebir.com</h1>
ÇIKTI:
Webcebir.com
flipInX
fonksiyona göre örnek:
<h1 class="animated infinite flipInX delay-3s">Webcebir.com</h1>
ÇIKTI:
Webcebir.com
slideOutRight
fonksiyona göre Resimli örnek:
CSS:
.resim{
width: 103px;
height: 130px;
background: url("resim/ari.png") no-repeat;
position: relative;
}
<div class="animated infinite slideOutRight delay-3s resim">Webcebir.com</div>
ÇIKTI:
Kurtar Karakuş 15/03/2021
yönetici 16/03/2021
animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML RESİM EKLEME
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME