CSS3 Transition Keeps Resetting Rotation [duplicate]

Question

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

<a href="#"><span></span>Test</a>

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

<a href="#"><span>></span>Test</a>

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%);
}