12 harika CSS animasyon kaynağı

Anlamlı ve güzel CSS animasyonları oluşturmak zor ve zaman alıcı olabilir, ancak neyse ki, yaratıcı sürecinizi hızlı bir şekilde başlatmanıza yardımcı olacak bazı harika kaynaklar var. Bu kaynak koleksiyonu en iyi CSS animasyon kitaplıklarını içerir.

Projenize uygun olanı seçin ve hemen başlayın veya markanız için özel bir şey yaratmak için bunları başlangıç ​​noktası olarak kullanın. Ayrıca öğrenmenize yardımcı olacak bazı kullanışlı beşik sayfaları ve kısayollar da vardır.

Ne yaratmak istediğinizden emin değilseniz, neden ilham verici sayfamıza bakmıyorsunuz? CSS animasyon örnekleri bazı fikirler için yayınlayın. Yeni bir site mi tasarlıyorsunuz? İşte seçmeye yönelik kılavuzlarımız Web Sitesi Oluşturucu ve senin ağ sağlayıcısı hizmet hakkı.



01. Animista

Animista

Animista bir CSS animasyon oyun alanıdır

Animista, önceden hazırlanmış CSS animasyonları koleksiyonuyla düzenleme yapabileceğiniz ve oynayabileceğiniz bir tür oyun alanıdır. Ardından projelerinizde kullanmak için istediğiniz herhangi bir kodun kodunu kopyalayın. Animista hayata, hala geliştirmekte olan ön uç geliştiricisi Ana Travas için bir yan proje olarak başladı. Bu aracı kullanarak başlayın Animista ile isteğe bağlı CSS animasyonlarında ustalaşma kılavuzu .

02. CSS3 Animasyon Hile Sayfası

CSS3 Animasyon Hile Sayfası

Bu önceden ayarlanmış, tak ve çalıştır CSS3 animasyonları koleksiyonunu keşfedin

Bu yararlı proje, web projelerinizde kullanmanız için önceden ayarlanmış, tak ve çalıştır animasyonları sunar. Başlamanıza yardımcı olacak açık talimatlar var, ancak esasen, stil sayfasını web sitenize ekleyin ve önceden hazırlanmış CSS sınıflarını canlandırmak istediğiniz öğelere uygulayın. Bu hile sayfası CSS3 ana karelerini kullanır; bu, animasyonlar için yer açmak için öğeyi konumlandırma konusunda endişelenmenize gerek olmadığı anlamına gelir.

03. Animate.css

animate.css

Bu kitaplık 76 temel CSS animasyonu içerir

Bu kütüphane, tümü CSS'de oluşturulmuş ve kullanıma hazır en az 77 animasyonu bir araya getirir. Basitçe CSS dosyasına referans verin ve bir öğeye sınıflar eklediğinizde animasyon gerçekleşir. Bu, JavaScript kullanarak sınıf eklerken veya kaldırırken en iyi sonucu verir.

Kitaplık, küçültüldüğünde ve gzip'lendiğinde etkileyici derecede küçük bir dosya boyutudur, ancak sitenizin tamamını sitenize yüklemek istemiyorsanız, proje aynı zamanda harika bir ilham kaynağıdır. Dan Eden tarafından derlenen bu kitaplık, temel bilgilerden (zıplama, solma) daha heyecan verici bir şeye (Jack in the Box, Jello) kadar ihtiyacınız olabilecek hemen hemen her CSS animasyonunu içerir. Kitaplığın başlığının farklı stillerin her birinde canlandırıldığını görmek için ana sayfadaki açılır menüyü kullanın.

04. Hover.css

Hover.css

Hover.css, düğme etkileşimi animasyonlarına odaklanır

Animate.css'ye benzer şekilde, Hover.css projelerinizde kullanabileceğiniz bir CSS efektleri koleksiyonudur. Bu kitaplık, özellikle düğme etkileşimi animasyonları için oluşturulmuştur. Kitaplık vanilya CSS, Sass veya Daha Az olarak indirilebilir - bu nedenle hemen hemen her projeye uyacaklar. Kütüphane, etkileşim için ihtiyaç duyabileceğiniz neredeyse her animasyona sahiptir. (Alternatif depolama türleri için şunlara göz atın Bulut depolama seçenekler.)

05. CSShake

CSShake

CSShake, animasyonları sallamaya odaklanır

CSShake, öğeleri titretmeye adanmış bir CSS animasyonları kitaplığıdır. Kütüphanede, birçok farklı sallama animasyonundan birini uygulamak için öğelere ekleyebileceğiniz bir dizi sınıf vardır. Animasyonlar ana kareleri kullanır ve bazen çılgın görünen, ancak kesinlikle göz ardı edilmesi zor olan animasyonlar oluşturmak için dönüştürme özelliğini kullanır. Şimdi bir de kardeş kütüphanesi var - Yeniden salla - titreme efektlerini bir React işlevsel bileşeni olarak sunar.

06. Obnoxious.css

iğrenç CSS animasyonu

CSS animasyonunun nasıl yapılmayacağını bilmek ister misiniz?

Obnoxious.css, Tim Holman tarafından oluşturuldu ve tam olarak adından da anlaşılacağı gibi. Kitaplık, CSS animasyonuyla nelerin mümkün olduğunu araştırır, ancak CSS animasyonlarıyla yapmamanız gerekenleri mükemmel bir şekilde gösterir. Ürüne hazır bir animasyon kütüphanesi olarak sunulurken (ve öyle), yanak dil olarak kullanılması amaçlanmıştır. Kendinizi hazırlayın.

07. Replainless.CSS

Replainless.CSS

Bu animasyonlar süper hızlı

Replainless.css, tarayıcıdan yeniden boyamaya neden olmayan animasyonlar oluşturmaya odaklanan (doğru kullanıldıkları sürece) küçük ve hafif bir CSS animasyon kitaplığıdır. Yeniden düzenleme veya yeniden boyama gerektirmeyen bu animasyonlar süper hızlı ve performanslıdır!

08. Animate Plus

daha fazla canlandır

Bu animasyon kitaplığı mobil siteler için harika

Stripe, güzelce canlandırılmış ürün sayfaları ile tanınır. Bunların arkasındaki beyinlerden biri olan Benjamin De Cock, performansa sahip ve hafif bir CSS ve SVG animasyon kütüphanesi oluşturdu, bu da onu özellikle mobil cihazlara çok uygun hale getirdi.

09. Hareket UI

CSS animasyon çerçeveleri

Motion UI gibi güçlü animatörler, kullanışlı CSS araçlarıdır

ZURB'nin bu Sass kitaplığı, kullanıcı arayüzünüze özel animasyonlar uygulamayı kolaylaştırır. Bu listedeki diğer bazı kütüphanelerden biraz daha karmaşık, ancak çok güçlü. İhtiyaçlarınızı karşılamak için animasyonlar oluşturabilir ve ince ayar yapabilir, ardından bunları JavaScript kullanarak çağırabilirsiniz.

10. BounceJS

bouncejs

Kendi animasyon kitaplığınızı oluşturmak için bu aracı kullanın

Kendi animasyon kitaplığınızı oluşturmak istiyorsanız, bu kullanışlı bir araçtır. Çok sayıda eğlenceli ön ayarı vardır ve karmaşık animasyon kodu yazmanın ağır yükünü ortadan kaldırır. Animasyonları oluşturmak için gelişmiş dönüştürme işlemlerini kullanır, bunlar daha sonra kendi animasyon CSS dosyanıza eklenebilir ve istediğiniz gibi uygulanabilir.

on bir. GreenSock Animasyon Platformu

GreenSock Animasyon Platformu

GreenSock ile daha ileri gidin

GSAP, bir JavaScript animasyon çerçevesidir. Daha karmaşık animasyonlar oluşturuyorsanız (örneğin, banner reklamlar veya ana görseller), GSAP oynatma, SVG arası doldurma ve daha fazlasını işlemeye yönelik bir dizi araç sunar. CSS animasyonlarında yapılabileceklerden daha ileriye gitmek istiyorsanız bu harika, ancak biraz öğrenme eğrisi sunuyor. Daha fazlasını öğrenmek için şu sayfamıza bakın: GSAP kılavuzu .

12. Kolaylaştırma işlevleri hile sayfası

Kolaylaştırma işlevleri

Clip Studio Paint'te şeffaf bir arka plan nasıl yapılır
Bu hile sayfasıyla işlevleri kolaylaştırmak daha kolay

Zamanlama işlevleri, zaman içindeki değişim oranını belirtir ve bu site, animasyonunuz veya geçişiniz için doğru olanı seçmenize yardımcı olur. Bézier eğrilerinin önizlemesini yapabileceğiniz ve kodu hızlı bir şekilde kopyalayabileceğiniz bir galeriye sahiptir.

Daha fazla oku: