CODEWITHSUNDEEP
htmlcss
cup_of
cup_of

Reputation: 6687

Smooth CSS "Swinging" Animation Loop on Hover

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

Upvotes: 0

Views: 2022

Answers (2)

Hash
Hash

Reputation: 8020

Did a few edits. Changed the % transform & animation.

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

.box img {
  width: 300px;
  height: auto;
}

.box:hover img {
  -webkit-transform-origin: 50% 0;
  /* for Safari and older Chrome */
  transform-origin: 50% 0;
  -webkit-animation: swinging 2s ease-in-out forwards infinite;
  animation: swinging 2s ease-in-out forwards infinite;
}
<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>

Upvotes: 2

Paolo Forgia
Paolo Forgia

Reputation: 6748

You can easly achieve that by changing the animation from ease-in-out to linear

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

.box img {
  width: 300px;
  height: auto;
}

.box:hover img {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s linear forwards infinite;
    animation: swinging 2s linear forwards infinite;
}
<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>

Or in addiction you can try playing with cubic-bezier(P0, P1, P2, P3) for making your own animation

enter image description here

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

.box img {
  width: 300px;
  height: auto;
}

.box:hover img {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
  animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
}
<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>

Upvotes: 2

Related Questions