Yeni bir rehberden merhaba! Bu rehberde sizlere CSS transition kullanarak nasıl animasyon efektleri yapabileceğimizi anlatacağım. Daha önceki yazılarımdan biri olan Etkileyici Web Tasarımı: CSS Transform Scale Nasıl Kullanılır? rehberini okumanızı tavsiye ederim çünkü bu rehberde CSS transition özelliğini CSS transform scale ile birlikte kullanacağız. Örnek olarak bir buton oluşturacağız ve bu butona her iki özelliği kullanarak nitelik kazandıracağız. Hazırsanız başlayalım.
Adım 1: Önce Butonumuzu Oluşturalım
HTML dosyamızı oluşturalım. body etiketlerimiz arasında <button></button> etiketi açarak bir buton oluşturalım. Butonun içindeki metni istediğiniz gibi ayarlayabilirsiniz.
Adım 2: Butonumuzun Stillerini Belirleyelim
Butonun CSS özelliklerini aşağıdaki gibi yaptığımızda karşımıza kenarları hafif kıvrımlı, iç yazısı beyaz olan yeşil bir buton çıkacaktır.
button {
border-radius: 10px;
padding: 10px 20px;
color: white;
background-color: green;
border: none;
display: block;
margin: 3rem auto 0;
}
button:hover {
transform: scale(1.2);
cursor: pointer;
}
button:active{
transform: scale(0.9)
}Eğer buradaki kodların detaylı açıklamasını öğrenmek isterseniz bu Codepen projesini ziyaret edebilirsiniz. Bu Codepen projesini sözünü ettiğim CSS transform scale makalesi için oluşturmuştum. Zaten fark ettiyseniz transform scale özelliğini burada kullandık. Bizi ilgilendiren ve bu rehberin de konusunu oluşturan CSS transition özelliğini bu butona ekleyeceğiz.
Butonumuzu oluşturduktan sonra fark etmiş olacaksınız ki fare imleci ile üzerine geldiğimizde buton ani bir şekilde büyüyor ve butona tıkladığımızda ise yine hızlı bir şekilde içeri göçüyor. Bu geçişleri daha yumuşak hale getirip animasyon efekti vermek için CSS’de transition özelliğini kullanırız.
Adım 3: Butonumuza Yumuşak Geçiş Efekti/Animasyon Ekleyelim
Tekrar CSS dosyamıza geri dönelim ve aşağıdaki kodu button:hover seçicisine ekleyelim.
***
button:hover {
transform: scale(1.2);
cursor: pointer;
transition: 0.3s all; /* Bu kodu ekledik. */
}
***Artık butonumuzun üzerine geldiğimizde yumuşak bir geçiş efekti ile büyüdüğünü göreceksiniz. Daha önceden transform scale ile butonun boyutunu, üzerine geldiğimizde büyüyecek şekilde ayarlamıştık. Bu kod butonun üzerine geldiğimizde büyüme animasyonunu 0.3 saniyelik bir hareketle tamamlayacaktır.
Şimdi butona tıkladığımızda oluşacak animasyonu ayarlayalım. Aşağıdaki kodu bu sefer button:active seçicisine ekleyelim.
***
button:active {
transform: scale(0.9);
transition: 0.15s all; /* Bu kodu ekledik. */
}
Butona tıkladığımızda yine benzer şekilde yumuşak geçiş efekti ile içeri doğru göçtüğünü göreceksiniz. Bu sefer geçişi 0.15s olarak ayarladık çünkü bu süre tıklamalarda daha uygun bir animasyon görüntüsü sağlıyor.
Sonuç
CSS transition konusu aslında birden çok alternatif sunan bir yapı. Ben bu yazıda şahsen en çok tercih ettiğim özellik olan ease all kullandım. Bunun dışında animasyonları dilediğimiz gibi özelleştirebileceğimiz geçiş yapıları da var. Mesela ease-in ile animasyonu yavaş başlayacak şekilde başlatabilir, ease-out ile animasyonu yavaş bitecek şekilde ayarlayabiliriz. Bu tamamen kişisel tercihlerimize bağlıdır.
Butonun son halini buradan görebilirsiniz. Ben bu rehberde buton üzerinden ilerledim ancak bu geçiş efektleri uygun olan istediğiniz herhangi bir HTML ögesi üzerinde de kullanılabilir. Bu tamamen sizin hayal gücünüze kalmış.
Umarım yazı faydalı olmuştur. CSS ile ilgili diğer yazıları ziyaret etmek için buraya tıklayabilirsiniz. Yeni rehberlerde görüşmek dileğiyle!
