CodePen'de İlham Veren 15 CSS Animasyon Örneği

CodePen, web tasarımlarımızla neler yapabileceğimizi göstermek için hızla önemli bir yer olmaya başladı. İnsanların son zamanlarda CSS animasyonları ile yarattığı harika şeylerin bir listesi ile sizlerleyiz!

1. JavaScript Mickey Saat

Jay Salvat(@jaysalvat)'dan Apple saati benzeri Mickey saat. 

Bu örnek CSS geçişleri, SVG grafikleri ve JavaScript'i kullanarak elleri tatlı bir Mickey Mouse yüzeyi üzerinde konumlandıran çok güzel bir örnek.

2. CSS Denizaltı

Alberto Jerez(@ajerez)'den CSS ile deniz altı. 

Dairesel delikli konteynerın muhteşem kullanımı, bu CSS animasyonlu denizaltına çok güzel bir hava katmakta.

3. ASCII AT-AT

Tim Pietrusky(@TimPietrusky)'den AT-AT.

Star Wars esintili personel taşıyıcı, renkleri CSS ile değişen (cycle) metin kullanılarak çizilmekte. Acayip bir efekt.

4. SVG / CSS Yükleyici(Loader)

Bidji(@Bidji)'den SVG/CSS Yükleyici. 

Bu yükleyici, renk değişimi kullanarak dönme izlenimi vermekte.

5. 3D CSS Zaman Makinasi

Gerwin van Royen(@Gerwinnz)'dan 3D CSS Zaman Makinası .

CSS harika 3D efektler oluşturmak için kullanılabilir. İşte üç boyutlu bir zaman makinası:

6. Uyuklayan Kuş

Peter Klein(@pmk)'dan Uyuklayan Kuş 

Basit sanat stili ve doğru miktarda animasyon, bu uykulu kuşa canlıymış havası vermekte.

7. Tamamen CSS kenar animasyonu

Rplus (@rplus)'dan SVG içermeyen tamamen CSS kenar animasyonu

CSS kenarlarını kullanan basit ama oldukça etkili yükleme animasyonu.

8. Star Wars: The Force Awakens

 Donovan Hutchinson (@donovanh)'dan CSS'de Star Wars: The Force Awakens.

Yakında gelecek olacak olan Star Wars filminin başlığı CSS, HTML ve biraz JavaScript kullanılarak oluşturuldu.

9. 3D Synth

Nikolay Talanov (@suez)'dan tamamen CSS 3D Synthesizer (Döndürmek için fare'ye basılı tutun) 

CSS kullanarak oluşturulan bu 3D synth'i döndürmeyi ve  tuşlarına basmayı deneyin. Harika bir çalışma:

10. Kademeli Güneş Sistemi

Tady Walsh (@tadywankenobi)'dan Kademeli Güneş Sistemi! 

Ölçeklenmiş dönüş hızı, ayları ve detaylı büyük gezegenleriyle güneş sistemimizin tam bir modeli. Güneş bile gerçeğinin bire bir canlı yansıtılması!

11. 3D Güneş Sistemi

Wayne Dunkley (@waynedunkley)'den Tam CSS 3D Güneş Sistemi.

Bu sefer 3D olan başka bir güneş sistemi. Gölgelemenin(Shading) güzel bir kullanımı.

12. Flat Tasarım Kamera

Damien Pereira Morberto (@damienpm)'dan CSS animasyonlu flat tasarımlı kamera.

Bu düz kameradaki deklanşöre basarak, CSS animasyonu kullanarak fotoğraf oluşturduğunu görebilirsiniz.

13. Gündüz ve Gece Geçişi

Szymon Stypa (@Catagen)'dan Gündüz Gece simülasyonu.

Gündüz'ün geceye dönüşümü görmek için düğmeye basın.

14. CSS ile Hareketli Sprite

Avaz Bokiev (@samarkandiy)'dan CSS ile Sprite canlandırma.

Bir dizi resim(sprite) kullanarak ileri ve geri hareket'de içeren bir dur-hareket animasyonunu nasıl oluşturabileceğiniz örneği.

15. Dodecahedron (12 Yüzlü Şekil)

wontem (@wontem)'dan Dodecahedron.

Tamamen CSS ile yaratılmış ve canlandırılmış ince, güzel bir dodecahedron.

 Sonuç

Kısa bir süreye kadar, herhangi bir tarayıcıda animasyon yaratmak istediğimizde Flash veya JavaScript araçlarına ihtiyacımız olurdu. Modern tarayıcılar, donanım hızlandırmalı 3D ve animasyonlu CSS için daha iyi bir destek sağlamakta.

CodePen gibi siteler sayesinde, her zamankinden daha kolay paylaşabilir ve öğrenebiliriz. Son zamanlarda gördüğünüz en etkileyici animasyon demo'larından bazıları neler?