CSS Transition Geçişleri

div {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
                

CSS transition Özelliği bir öğe hover olduğunda ya da .active gibi bir classname aldğında değişen stil özellilerini öğeye geçişli bir şekilde vermeyi sağlar.

CSS Transition Konuları

• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• transition kısa yolu yazımı.

transition-property Özelliği

transition-property ile geçiş işlemleri hangi css özelliklerine uygulanması gerektiğini belirtir.
Tüm CSS özelliklerine uygulanması isteniyorsa, color, background-color, margin, padding, vb. transition-property:all; şeklinde kullanılabilir.

div{
    transition-duration:2s; /* Geçiş Süresi 2 Saniye */
    transition-property:padding, background-color; /* sadece padding ve arka plan rengini geçişli yaptık */
    width:100px;
    height:100px;
    background-color:green;
    padding:50px;
    box-sizing:content-box;
}
div:hover{
    padding:100px;
    background-color:red;
    
}
                

Multiple Transition Property Kullanımı

Birden fazla transition-property değeri girmek için her değer arasına , virgül koyunuz.

div{
    transition-property:margin, padding, height, max-height, background-color, color, ...
}
                    

Transition Duration / Geçiş Süresi

transition-duration geçiş süresini aynı animation-duration da belirttiğiniz gibi saniye ve milisaniye cinsinden bir süre girmeniz gerekir.

div{
    transition-duration:2s; /*2s = 2000ms Geçiş 2saniye de tamamlanacak */ 
}
                

transition-timing-function / Geçiş Zamanı Yapılandırması

transition-timing-function Özellği de animation-timing-function ile aynı matıkta çalışmaktadır.

Aşağıdaki kutulara mouse ile hover yaparak geçiş efektlerini inceleyiniz.

transition:delay; / Geçişi Geciktirme

transition-delay css özelliği çok sık kullanılan bir transition özelliğidir. Örnek olarak sahneye kapsayıcı div elemanına :hover yaptığınızda 2 adet öğe getirmek isitiyorsunuz. 1 öğeyi hemen ve 2. öğeyi de .5s geçikmeli olarak getirmek istiyorsunuz.
işte bu noktada 2. öğeye transition-delay özelliğini ekleyiniz.

Transition Delay Uygulama

.demo-delay-wrapper {
    height: 300px;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}

.demo-delay-wrapper:hover .demo-delay {
    opacity: 1;
    visibility: visible;
    bottom: 50px;
    background-color: indigo;
}

.demo-delay {
    height: 100px;
    width: 100px;
    position: absolute;
    bottom: 100%;
    opacity: 0;
    visibility: hidden;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #fff;
    padding: 25px 10px;
}

.delay1 {
    transition-delay: .5s;
    left: 130px;
}
                

transition CSS Kısa Yolu

div {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
} 
div {
    transition: background 2s ease-in .5s; /* Property Duration Timing Function Delay */
    } 
                

transition CSS Örneği

.demo-move2 {
    background-color: green;
    transition: background-color 2s, left 1s;
    transition-delay: 0s, 1s;
    transition-timing-function: ease-in, ease-in-out;
    left: 0;
    width: 100px;
    height: 100px;
    position: relative;
}

.demo-move-wrapper:hover .demo-move2 {
    left: 50%;
    background-color: indigo;
}
                

Sonuç