CSS3 Transition Keeps Resetting Rotation [duplicate] - html

Question

This question already has an answer here:
CSS animation on hover stay at last keyframe when using transform: rotate
(1 answer)
Closed 8 years ago.
I have a CSS3 Transition but right at the end of the transition my rotation resets to normal state. The HTML and CSS are simple:
HTML
<span></span>Test
CSS
a {
text-decoration: none;
}
a span {
display: inline-block;
width: 25px;
}
a span:before {
content:'>';
font-size: 10px;
font-weight: bold;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a:hover span:before {
margin-left: 55%;
-webkit-transform: rotate(-90deg);
}
The transition goes as expected except at the very end of the animation the rotation resets to normal state instead of persists. I've created a JSFiddle as an example. How do I keep my rotation to persist?

Answer 1

Try adding display: inline-block
like this:
a:hover span:before {
margin-left: 55%;
-webkit-transform: rotate(90deg);
display: inline-block;
}
fiddle.
Explanation.
The pseudo elements, like :before or :after are inline, by default, so they have issues with being transformed, thus you need to set them to display: block or display: inline-block.

Answer 2

Its Working Use this Method
Don't use margin for animation use translate istead.
for better smooth transitions
Demo
html
<span>></span>Test
css
a {
text-decoration: none;
}
a span {
display: inline-block;
width: 25px;
}
a span{
font-size: 10px;
font-weight: bold;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a:hover span{
-webkit-transform: rotate(-90deg) translateX(50%);
-moz-transform: rotate(-90deg) translateX(50%);
-ms-transform: rotate(-90deg) translateX(50%);
-o-transform: rotate(-90deg) translateX(50%);
transform: rotate(-90deg) translateX(50%);
}