Turkish (Türkçe) translation by Nevres Emre Alsancak (you can also view the original English article)
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?
