transition property not working on a div with border-radius
.circle {
color: white;
width: 100px;
height: 100px;
/* border-radius: 50px; */
background-color: #ff7979;
transition: transform 0.5s linear;
}
.circle.rotate {
transform: rotate(-30deg);
}
I have a button that adds and removes rotate class from the circle div, I want the circle to animate the rotation when press the button. The circle is rotating fine with border-radius removed, but when added it just disappears from its previous position and appears at the new position like there is no transition property added to circle class. What am I getting wrong?
color: white;
width: 100px;
height: 100px;
/* border-radius: 50px; */
background-color: #ff7979;
transition: transform 0.5s linear;
}
.circle.rotate {
transform: rotate(-30deg);
}
I have a button that adds and removes rotate class from the circle div, I want the circle to animate the rotation when press the button. The circle is rotating fine with border-radius removed, but when added it just disappears from its previous position and appears at the new position like there is no transition property added to circle class. What am I getting wrong?
