transition: Html elementinini tüm geçiş özelliklerini belirler.


transition-property:

transition-property: all veya css özellik adı yani bu işlem hangi özelliğe uygulansın onu belirtiyoruz.

<aside> 💡 all yazarsan etiketi ilgilendiren her durum amma width ,height gibi tek tek de seçebilirsin.

</aside>

.deneme{
    width: 50%;
    height: 10vh;
    border: #0008ff solid 5px;
    transition-property:color;
}
.deneme:hover{
		color:black;
    transform-origin:center ;
    transform: rotateY(180deg);
}

transition-duration:

transition-duration: Geçiş süresi işlem kaç saniyede tamamlansın onu belirtiyoruz. Saniye veya milisaniye cinsinden değer girebiliriz → 2000ms veyahut 2s.

.deneme{
    width: 50%;
    height: 10vh;
    border: #0008ff solid 5px;    
    transition-property:color;    /* değerlerin uygulanacağı css adı */
		transition-duration:350ms;    /* geçiş işlem süresi */
}
.deneme:hover{
		color:black;
    transform-origin:center ;
    transform: rotateY(180deg);
}

transition-timing-function:

transition-timing-function: Hız eğrisi geçiş ne hızda ilerlesin onu belirtiyoruz.

.deneme{
    width: 50%;
    height: 10vh;
    border: #0008ff solid 5px;
    transition-property:color;                        /* değerlerin uygulanacağı css adı */
    transition-timing-function:cubic-bezier(0,1,1,0); /* Hız eğrisi */
		transition-duration:350ms;                        /* geçiş işlem süresi */
}
.deneme:hover{
		color:black;
    transform-origin:center ;
    transform: rotateY(180deg);
}

transition-delay:

transition-delay:; Geçiş ne kadar süre sonra başlıyacağını belirtiriz.