Calum Reid Calum Reid - 1 year ago 156
CSS Question

How to reverse this CSS spin animation

Here is my code:

.dropdown:hover .arrow4{
-webkit-animation: spin 0.3s linear;
-moz-animation: spin 0.3s linear;
-o-animation: spin 0.3s linear;
-ms-animation: spin 0.3s linear;
animation-fill-mode: forwards;
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(90deg); }

This works very well for spinning the arrow 90 degrees then staying, but when I hover off it snaps back into place as opposed to rotating back.

Answer Source

You can use the following on the default style

transform: rotate(0deg);
transition: 0.3s;

and the following on the hover state

transform: rotate(90deg);
transition: 0.3s;

Example here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download