0

I got an image

<div class="spin-image">
    <img src="images/color-wheel.png" alt="" />
</div>

and its corresponding css

.spin-image {
  -webkit-animation:spin 10s linear infinite;
  -moz-animation:spin 10s linear infinite;
  animation:spin 10s linear infinite;

  -webkit-transition-duration: 2s; /* Safari */
  transition-duration: 2s;
}

.spin-image:hover {
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

What I'm trying to do is to accelerate the image spinning on hover. The animation works, but the transition does not.

1

1 Answer 1

1

If you realise, this is like the animation and the hover animation are two different ones, and they reset to their virtual state of rotation in case they were running all the time you were or weren't hovering. Unfortunatly, it is not posible to animate the transition between 2 different animation-durations.

Yet if you really really need a solution for this, you could program the animation using transition and a javascript interval that resets the positions for every turn. This way yo can reset the property and the duration of the transition at any time with javascript.

I made you a pen: http://codepen.io/vandervals/pen/aONmVL

This is the css you need:

.spin-image img{
  transition: transform 2s linear;
  transform: rotate(0deg);
}
.spin-image img.hover{
  transition: transform 1s linear;
}

And the JS:

var vel = 2000;
var degs = 0;
var cat = document.querySelector("img");
function repeat(){
  if(vel == 1000){
    cat.classList.add("hover");
    console.log("hover")
  }else{
    cat.classList.remove("hover");
    console.log("nohover")
  }
  degs+=360;
  cat.style.transform = "rotate("+degs+"deg)";
  setTimeout(repeat, vel);
}
repeat();
document.querySelector("img").addEventListener("mouseenter",hovering);
function hovering(){
  vel = 1000;
}
document.querySelector("img").addEventListener("mouseleave",nohovering);
function nohovering(){
  vel = 2000;
}
1
  • Your right but Why don't you use two classes. One as standard and one for the hove animation. that on hove remove the first class and add the class with the faster animation.
    – Vinc199789
    May 13, 2015 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.