Ç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

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

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  3532   1 yıl önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  2307   1 yıl önce

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...

  1687   2 yıl önce

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

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

  5417   2 yıl önce

Olcay E. 3 ay önce demiş ki;


selamun aleyküm, yararlı bir css dersi
Yoruma Git

erhan tapan 9 ay önce demiş ki;


Siteyi coşturan kod erhan bunu beğendi
Yoruma Git

Nejdet Acar 1 yıl önce demiş ki;


Okumadan hemen cevaba sarılmayalım lütfen, okuyanlara ayıp oluyor...
Yoruma Git

Çılgın Koder 1 yıl önce demiş ki;


Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.
Yoruma Git