CSS3 Transition Saves Rotation Reset

Question

I have a CSS3 transition, but right at the end of the transition my rotation resets to normal. 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 that at the very end of the animation, the rotation returns to its normal state rather than being saved. As an example, I created a JSFiddle . How to save rotation preservation?

Answer 1

Try adding display: inline-block for example:

 a:hover span:before { margin-left: 55%; -webkit-transform: rotate(90deg); display: inline-block; } 

fiddle

Explanation.

Pseudo-elements, such as :before or :after , are built-in by default, so they have conversion problems, so you need to set them to display: block or display: inline-block .

Answer 2

Its use Use this method

• Do not use margin to use translate istead animation.
• for smoother 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%); }