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?
11 Replies
I dont think the border radius is the problem, it must be something else, I've tried your code in codepen with the border radius and it worked
yep same here, no issues.
make a codepen so we can look at your code
and here to, no issues 😄
this is the code pen link: https://codepen.io/Mohsin-kamal-Khan/pen/YzoKLwd
It works fine for me
but when i add border-radius property to circle class which i have commented than the rotation animation of div disappears for me, it rotates fine but animation of rotation disppears, I do not know why it is working for you
this might be a performance issue from your browser/os maybe. because codewise there is nothing wrong with it
Which browser/device are you using
Yes the reason is pc, with i5 2nd gen this problem is occuring but with my i7 laptop, it works fine
thanks for the help