Calum Reid Calum Reid - 1 month ago 25
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

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: https://jsfiddle.net/dt98evye/