0

I have already visited this question. However, -webkit-animation-fill-mode: forwards; does not seem to prevent a reset after a rotation animation.

This code results in the span reverting to its normal state after the rotation is complete:

@-webkit-keyframes spin
{
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-180deg); }
}

.spin:hover span
{
    -webkit-animation: spin 0.8s;
    -webkit-animation-fill-mode: forwards;
}

But, this code, which is not a rotation, works:

@-webkit-keyframes shove
{
    0%   { margin-left: 0px; }
    100% { margin-left: 50px; }
}

.shove:hover span
{
    -webkit-animation: shove 0.8s;
    -webkit-animation-fill-mode: forwards;
}

Here is a JSFiddle to take a look at.

Community
  • 1
  • 1
Senju
  • 1,035
  • 10
  • 25

2 Answers2

3

I found the problem. For some reason the rotation animation resets if the element is inline. By displaying the span as a block or inline-block the animation does not reset after the rotation.

JSFiddle demonstrating the answer.

Senju
  • 1,035
  • 10
  • 25
0

Try this:

.spin {
-webkit-transition: all 0.8s linear;
}

.spin:hover {
-webkit-transform: rotate(180deg);
}

Updated fiddle: http://jsfiddle.net/52KN7/17/

freewheeler
  • 1,306
  • 2
  • 12
  • 24