悬停时加速图像旋转

Question

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.

Answer 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;
}