Border Transition Sorunu
Bordera transition eklemek istiyorum fakat border fadein gibi olması gerekirken borderın kalınlığı artarak garip bir transition uygulanıyor.
Kodlarım:
https://jsfiddle.net/5ro3142b/
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
.div {
width: 100px;
height: 100px;
transition: 500ms border-color;
text-align: center;
line-height: 100px;
margin: 50px;
color: white;
border-bottom: 2px solid;
border-color: transparent;
background: gray;
}
.div:hover {
border-color: red;
}
Şöyle bir trick deneyebilirsin.
Merhaba, birde benim attığım gibi deneyin.
.div {
width: 100px;
height: 100px;
transition: 300ms border-bottom;
text-align: center;
line-height: 100px;
margin: 50px;
color: white;
background: gray;
border-bottom: 2px solid transparent;
}
.div:hover {
border-color: red;
}