transition:
Html elementinini tüm geçiş özelliklerini belirler.
transition:
parametreleri:transition:all 0 ease 0;
transition: all 900ms linear 1s;
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:
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:
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:
; Geçiş ne kadar süre sonra başlıyacağını belirtiriz.