Animation run even after de-hovering


#1

So is there a way to make a CSS animation continue even after leaving it with the mouse, I could use JS but I prefer CSS animations because JS animations are sometimes buggy.
I want to rotate a Font Awesome undo icon(animations works on them) and when leaving it with the mouse it would continue it’s animation like nothing happened.
HTML

<p class="fa fa-undo"></p>

CSS

.fa {
  font-size: 25px;
  transition-duration: 1.25s; /*It's here because I couldn't figure it out*/
}
.fa:hover {
  transform: rotate(-360deg); /*so it will rotate counter-clockwise*/
  transition-duration: 2s;
}

The icon looks like this(just in case):
image
Any help would be appreciated. :grinning:


#2

You could try WebKit.

It’s not supported in older browsers though, only from:
Chrome 43.0
Edge 10.0
FireFox 16.0
Safari 9.0
Opera 30.0

I haven’t worked with it a lot, but it is quite easy to use.
Firstly you’ll need a function that does the animation:

@keyframes myRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}

What is does is rotates it from it’s normal position, to 1 full rotation.

Next you have to assign this to the element you want to rotate:

<p class="fa fa-undo"></p>

The CSS:

.fa {
    font-size: 25px;
    -webkit-animation: myRotate 2s infinite;
    -webkit-animation-timing-function: linear;
}

To make it rotate, you just need the one line -webkit-animation: myRotate 2s infinite;. You first tell it which function to use “myRotate” (This is just a name I chose, it’s the same as what you called this: “@keyframes myRotate”. Second is the time it takes for 1 full rotation. Lastly the infinite just tells it to continue indefinitely.

With just the 1 line the element will rotate, but it will stop just before starting the next rotation (this is a nice effect for a loading element).

If you want a seamless rotation (without the pause to the next rotation), you have to add this line: -webkit-animation-timing-function: linear;. Like it implies, it makes the transition linear.


#3

Thank you for the answer, but it doesn’t work, it just keeps running, I don’t know if it’s my browser or anything, but thank you for the answer you gave me an idea on this.