1

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.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Calum Reid
  • 43
  • 1
  • 2
  • 5
  • Could you please elaborate on what you have tried already? It will help to guide others in supplying you with new ideas and prevents mutual frustration about solutions you have explored yourself. Also, it logs your knowledge, so you contribute to the community. – Digitalis Nov 01 '16 at 22:37
  • i have tried a lot with using and reversing "to" and "from" lines of code, but to no avail which seems to be the main method i cam accross – Calum Reid Nov 01 '16 at 22:39
  • @CalumReid From what I understand, the problem is that you are using an `animation` when you need a `transition`. – Ricky Ruiz Nov 01 '16 at 23:03
  • i believe so! thanks ill keep that in mind! – Calum Reid Nov 01 '16 at 23:08

2 Answers2

2

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/

mark_c
  • 1,202
  • 1
  • 8
  • 10
  • this worked! allowed me to clear up my code a lot aswell! thanks a bunch – Calum Reid Nov 01 '16 at 23:06
  • The `transition: 0.3s;` in the hover state is optional (unless another timing value is needed for mouseleave) – Roko C. Buljan Nov 01 '16 at 23:09
  • @CalumReid Using `transition` in the `:hover` state is not necessary in this example. Maybe [**this**](http://stackoverflow.com/a/38226571/4305494) makes things clearer. – Ricky Ruiz Nov 02 '16 at 00:17
0

use animation-fill-mode:both;

this will run the animation in both directions.

Ozoid
  • 149
  • 1
  • 11
  • I reckon that won't work on the hover instruction as that's fired when the mouse hovers over it, whereas your looking for a way to handle the case where the mouse leaves the element. Try creating a separate selector without hover and use Ozoid 's suggestion there. – Digitalis Nov 01 '16 at 22:47
  • thanks for the help, it is not unnappreciated, marks_c's answer worked well for me – Calum Reid Nov 01 '16 at 23:07