Ana SayfaWeb TasarımEn Çok Kullandığım 4 CSS Animasyon Sitesi

En Çok Kullandığım 4 CSS Animasyon Sitesi

YouTube'ta Takip Et →

Animasyonlar, web sitelerinde göze hoş görünen, olumlu bir etki bırakmak için kullanılan hareketlerdir. HTML5, JavaScript ve WebGL ile bu tür animasyonlar eklenebiliyor olsa da CSS animasyonlar pratik olması ve az yer kaplaması nedeniyle, mümkünse tercih edilen animasyon türü oluyor.

CSS ile animasyon teknikleri arasında linklerin, butonların üzerine gelince görünen animasyonlar, CSS ile yapılmış loading (yükleme) şekilleri, hamburger menünün ilgili başka şekillere dönmesi gibi farklı kullanım alanları bulunuyor.

Bahsettiğimiz bu teknikleri hızlıca web sitelerinizde görüntüleyebilmek için kopyala yapıştır kodlara başvurabilirsiniz. Bu animasyonlar hazır halde sunuluyor ve sadece kodları sitenize kopyalayarak aktif hale getirebiliyorsunuz.

CSSFX

Küçük ve basit hareketli CSS efektlerine ihtiyaç duyduğunuz anda başvurabileceğiniz bir sitedir CSSFX. Kullanmak istediğiniz animasyonun veya hareketin üzerine tıkladığınızda bir popup açılacak ve bu ekranda size kullanabileceğiniz CSS kodlarını sunacaktır.

Transformicons

İkonlar arası geçiş yapan CSS animasyonu için hazırlanmış bir site. İkonların önizlemelerini görmek için üzerlerine tıklamanız gerekiyor. Kodlarını almak istediğiniz ikonların altındaki seçenekleri yeşile çevirirseniz ve en alttaki Build butonuna tıklarsanız kodları göreceksiniz.

Epic Spinners

Sayfaların yükleniyor animasyonları, sayfa yüklenirken ziyaretçilerin canlarının sıkılmaması ve sayfa yükleme sürelerinde yaşanan gecikmeler sırasında ilgi çekmesi açısından kullanılan animasyonlardır. VueJS animasyonlarından olan bu hareketli CSS animasyonlarına tıkladığınızda açılan popup ile ilgili kodlara ulaşabilirsiniz.

Easing Functions

Web sitelerinizde nesnelere hareket verirken belli bir hızla hareketi verirsiniz. Bu animasyonlar doğrusal hareketler de olabilir, hızla başlayıp yavaşlayan veya yavaş başlayıp ortada hızlayıp sonra tekrar yavaşlayan hareketler gibi doğrusal olmayan hareketler de. Keyifli animasyonlar oluşturmak için bu hız dengelerine dikkat etmelisiniz.

Bu hareketli CSS’leri web sitenize ekleyerek sitenizi canlandırabilir ve daha etkileyici görünmesini sağlayabilirsiniz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.