CSS'te Transition

Bu dersimizde CSS'te transition konusuna değineceğiz. transition dilimizde geçiş anlamına gelmektedir. CSS3 ile gelen bir teknolojidir ve yaygın olarak kullanılmaktadır.

        #deneme {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        #deneme:hover {
            width: 300px;
            height: 300px;
        }
    

Şeklinde kodlarımız olduğunu varsayalım.

        <div id="deneme"></div>
    

HTML kodlarımız ise bu şekilde olsun.

Fare ile mavi div'in üzerine gelince genişliğinin 300x300px olduğunu göreceksiniz. Bunu sözde sınıflar konusunda :hover alt başlığında incelemiştik.

        #deneme2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease-in-out;
        }
        #deneme2:hover {
            width: 300px;
            height: 300px;
        }     
    

deneme2 adında yeni bir ID oluşturdum. deneme ID'si ile aynı değerlere sahip. Tek farkı transition değerlerinin gelmesi. transition-property yani geçiş özelliğini, all olarak belirledim. all, width ve height değerlerini içine almaktadır. transition-duration yani geçiş süresi 1 saniye olacak. transition-timing-funcition, geçiş zamanlama fonksiyonu ise geçiş efektinin nasıl olacağını belirler. En sık kullanılanı ease-in-out'tur. Şimdi de ekran çıktımıza bakalım.

Görüldüğü gibi yükseklik ve genişlik 1 saniye içinde geçişli bir şekilde 300x300 piksel oldu.

        #deneme2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: all 1s ease-in-out;
        }
        #deneme2:hover {
            width: 300px;
            height: 300px;
        }     
    

Tüm bu değerleri tek bir satırda da yazabiliriz.

Sonuç değişmeyecektir.

        #deneme3 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: background-color .5s linear;
        }
        #deneme3:hover {
            background-color: violet;
        }    
    

Eğer sadece tek bir özelliği değiştirmek istersek sadece o özelliğin adını yazmalıyız. Örneğin bu örneğimizde sadece arkaplan rengini değiştirmek istiyoruz. .5s yarım saniye anlamındadır. Geçiş zamanlama fonksiyonunu ise linear olarak belirledim.

Bu şekilde sadece arkaplan rengini değiştirmiş olduk.

        #deneme4 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: background-color .5s linear 1s;
        }
        #deneme4:hover {
            background-color: violet;
        }
    

linear'dan sonra yazılan 1s değeri geçişin 1 saniye gecikme ile başlayacağını belirtmektedir. transition-delay yani geçiş gecikmesi anlamındadır.

Eğer fare ile div'in üzerine gelirseniz geçişin 1 saniye sonra başlayacağını fark edeceksiniz. Aynı şekilde fare ile üzerinden gidince de 1 saniye sonra eski halini almaya başlayacaktır.

        #deneme5 {
            width: 48px;
            height: 48px;
            background: url(/web_tasarim/Content/img/twitter_sosyal_medya.png) no-repeat;
            opacity: .5;
            transition: opacity .3s ease-in-out;
            cursor: pointer;
        }
        #deneme5:hover {
            opacity: 1;
        }
    

Transition özelliğinin en çok kullanıldığı alanlardan biri bir ikonun üzerine gelirken şeffaflığının değişmesidir. Örneğin deneme5 adlı bir div'imiz olsun. Arkaplan resmi ise twitter sosyal medya resmi. Fare ile üzerine gelince şeffaflığını arttıralım.

Görüldüğü gibi twitter logosunun üzerine geldiğinizde şeffaflığının kalmadığını göreceksiniz. Burada "cursor: pointer" adlı yeni bir özellik ekledik. Cursor, fare imlecinin görünümünü değiştirir. Varsayılan olarak "cursor: default"'tur.

Transition, hemen hemen her web sitesinde kullanılan bir CSS3 özelliğidir. Bu yüzden üzerinde oldukça fazla durmalısınız ve bol deneme yapmalısınız.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Bu derslik bu kadar. Bir sonraki dersimizde CSS'te transform konusuna değineceğiz.