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
Not: Varsayılan gecikmeler yalnızca 1 saniyeden 5 saniyeye kadardır. Özel gecikmelere ihtiyacınız varsa, bunu doğrudan kendi CSS kodunuza ekleyin.

Ö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
Not: 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

delay-4s gibi geciktirme sınıfları çalışmıyor. Kendimiz ayrı sınıf yazdık yine çalışmıyor. Örneklerinizde de çalışmıyor zaten. Neden olabilir?

yönetici 16/03/2021

Animate.css ilk yerinde uyarıyor versiyon 3'den versiyon 4'e geçmiş bazı değişikler yapmışlar. Gecikmeler 1 ila 5 saniye arasındadır. --animate-delay Mülkü daha uzun veya daha kısa bir süreye ayarlayarak bunları özelleştirebilirsiniz:
animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

7293

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • 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
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.