How do I rotate an image at hover and every 10 seconds?

Question

I made a css that can rotate my image when someone hover it But I would rotate this image every 10 seconds too

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

.smiley-construct img:hover {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    transform: rotate(540deg);        
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
}      


<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div>

Can I change that to rotate my image every 10 seconds but and keep the hover rotate too ?

Thanks

score 1 · Answer 1 · answered Dec 09 '20 at 19:10

1

You can create a keyframe in css, something like this:

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  93% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(540deg);
  }


.smiley-construct img {
    animation: rotating 10s infinite;
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

answered Dec 09 '20 at 19:10

KienHT

1,098
7
11

Thanks @kien-ha-trung for your answer, that was my first try but combine the keyframes for rotate every 10 seconds and the hover work separately but not together :// – Quentin Content Dec 10 '20 at 00:40

A Haworth · Answer 2 · 2020-12-10T09:02:39.620

We can have two CSS animations - one which rotates the face then waits for the best part of 10s and keeps doing that and the other which kicks in on hover and just spins once.

I am not absolutely sure of the effect you want - is the face to go upside down after each rotate? You may want to play around with animation-fill-mode if not.

Here is a snippet:

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    animation-name: spinwait;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.smiley-construct img:hover {
    animation-name: spin;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
@keyframes spinwait {
    0% {
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(540deg);
    }
    7.1% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div>

Oh thanks @AHaworth, this is incredible, I understand now, do you think it's possible to have a smooth effect at the end of the both effect in the place of the jump end effect — Quentin Content, Dec 10 '20 at 14:08
I’m sure we can do something. What do you want it to look like, just a second to go back to upside down, something like that? — A Haworth, Dec 10 '20 at 14:33

score 0 · Answer 3 · answered Dec 09 '20 at 19:00

You can make a function in javascript and make something like this: Or make it jquery on when your page loads, but without knowing the structure and the resources available, I can not decide for you.

var elemPicture = document.getElementById("PictureId");
 elemPicture.style.transition = "all 0.5s"; 
 elemPicture.style.transform = "rotate(15deg)";

score 0 · Answer 4 · answered Dec 09 '20 at 19:10

0

Better yet, use keyframes. No need to add extra JS if you can use CSS.

There's a pretty good explanation of how to do this here.

answered Dec 09 '20 at 19:10

dSumner.1289

712
1
5
16

thanks for the link , I understand how to rotate every 10 seconds (when I does it alone) but can't understand how to mix it with a hover rotate. – Quentin Content Dec 10 '20 at 00:42

How do I rotate an image at hover and every 10 seconds?

4 Answers4