Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı CSS animasyonlarının nasıl kullanılacağını göstermektedir. Önceki videoda CSS animasyonlarını incelemiş olan konuşmacı, bu videoda projeye hangi CSS animasyonlarını ekleyebileceğimizi anlatmaktadır.
- Videoda, bir web projesine CSS animasyonları ekleme süreci adım adım gösterilmektedir. Öncelikle fare üzerine geldiğinde kartların büyümesi için transform ve transition özellikleri kullanılmaktadır. Ardından sayfa yüklendiğinde sol taraftan sağa doğru kayarak gelen bir sidebar ve yukarıdan aşağıya gelen bir video list için keyframes kullanılarak animasyonlar oluşturulmaktadır. Video, CSS animasyonlarının projelerde nasıl kullanılabileceğini gösteren pratik bir uygulama sunmaktadır.
- 00:09CSS Animasyonları Projesi
- Önceki videoda CSS animasyonları incelenmiş, bu videoda ise projeye hangi CSS animasyonlarının eklenebileceği gösterilecek.
- Proje "uygulama uygulama üç" adında olacak ve önceki "uygulama iki" kısmından devam edilecek.
- Proje sıfırdan yazılmayacak, mevcut kodlar kopyalanıp yapıştırılacak.
- 01:09Hover Animasyonu
- Fareye getirildiğinde kartların büyümesi için "video list item" sınıfına hover olayı eklenecek.
- Hover durumunda transform özelliği kullanılarak scale değeri 1.20 olarak ayarlanarak kartların büyümesi sağlanacak.
- Transition özelliği ile animasyonun yavaşlaması sağlanacak ve cursor pointer özelliği ile tıklanabilir hale getirilecek.
- 04:24Sayfa Yükleme Animasyonu
- Sayfa yüklendiğinde sol taraftan sağa doğru kayma animasyonu eklenecek.
- "sidebar" sınıfına position relative ve transform translate x -200 piksel değerleri verilerek başlangıçta gizlenecek.
- Keyframes kullanılarak "sidebar" animasyonu oluşturulacak ve 1 saniye içinde soldan sağa doğru hareket edecek.
- 07:41Video List Animasyonu
- Video list kısmının yukarıdan aşağıya doğru gelmesi için position relative ve transform translate y 1000 piksel değerleri verilecek.
- Keyframes kullanılarak "video list" animasyonu oluşturulacak ve 1 saniye içinde yukarıdan aşağıya doğru hareket edecek.
- İki animasyon senkronize bir şekilde çalışacak ve sayfa yüklendiğinde aynı anda görünecek.