Hello I have an image inside a div, and when that div is hovered over I would like the image to "swing" smoothly. 

I am very close, I have the image swinging but I cant get it to loop smoothly, it pauses after the animation is done for a small amount of time.

Can anyone help me finish the animation where it loops smoothly without any pauses?

Thanks!

Here is the code:

```
<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg">
</div>

@keyframes swinging{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(10deg);}
    75%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}

.box:hover img {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s ease-in-out forwards infinite;
    animation: swinging 2s ease-in-out forwards infinite;
}

```

And the jsfiddle
[here](https://jsfiddle.net/eeLytuo2)