Çeşitli CSS3 Animasyon Yapıları  Çeşitli CSS3 Animasyon Yapıları | Googleda Görüntüle

Çeşitli CSS3 Animasyon Yapıları
 BEĞEN
  YORUM YAP

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

Projelerinize farklı efektler ile farklı bir hava getirecek birçok CSS3 animasyon özellikleri var.Bu yazımda bunların toplanıp bir yapı haline getirilmiş şeklini paylaşacağım.

Öncelikle yazının sonunda indireceğimiz css dosyasını projemize çağrıyoruz.

Daha sonra javascript fonksiyonlarını projemize dahil ediyoruz.

Son olarak animasyonun işlev göreceği yeri kaplayan elemente aşağıda ki id ve class değerlerini veriyoruz.

Animasyon işlev göreci içerik

Gerekli işlemleri yaptığımıza göre nasıl kullanılır bunu görelim.Öncelikle birçok animasyon çeşiti var.Benim yukarıda verdiğim kodlarda FadeIn özelliği kullanılmış durumda.

FadeIn kullanılmış demoyu görmek için tıklayın.

FadeIn yerini değiştirerek aşağıda ki diğer özellikleride görebilirsiniz.

  • slideDown
  • slideUp
  • slideLeft
  • slideRight
  • slideExpandUp
  • expandUp
  • fadeIn
  • expandOpen
  • bigEntrance
  • hatch
  • bounce
  • pulse
  • floating
  • pullUp
  • pullDown
  • stretchLeft
  • stretchRight

Bu efektleri dilediğiniz şekilde kullanabilirsiniz.İster hover ister focus ister onload durumunda.

NEREDEN İNDİREBİLİRİM?

Buraya tıklayarak animations.css'i indirebilirsiniz.

Son olarak bu yapıyı hazırlayan Justin Aguilar'a teşekkür ediyorum.Buradan kaynağı inceleyebilirsiniz.

Etiketler

Yorumlar

Yorum Yap

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  791   10 ay önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  2882   1 yıl önce

Input Değerlerini Ön Belleğe Alma [ localStorage ]

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması...

  1540   1 yıl önce

Javascript İle Upload Öncesi Görselleri Önizlemek

Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz and...

  2270   1 yıl önce

Engin Pala 2 hafta önce demiş ki;


Teşekkür ederim ben işe koyuluyorum o zaman :D
Yoruma Git

Engin Pala 2 hafta önce demiş ki;


Merhaba Emre bey döviz kurlarının sürekli değişmesi mümkün mü yani anlık olarak nasıl çe...
Yoruma Git

Misafir 2 hafta önce demiş ki;


hocam bilgi için teşekkürler
Yoruma Git

sadık ikinci 1 ay önce demiş ki;


Emre bey, sizin kodlar ile merkez bankasından döviz değeri çekip, sitede para birimi dönüştü...
Yoruma Git