Question

我有一张图片

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

及其对应的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); } }

我要做的是在悬停时加速图像旋转。动画有效，但转换没有。

Answer 1

如果你意识到，这就像动画和悬停动画是两个不同的动画，并且它们会重置为它们的虚拟旋转状态，以防它们一直在运行或者没有悬停。遗憾的是，动画两个不同动画持续时间之间的过渡是不可能的。

然而，如果你真的需要一个解决方案，你可以使用转换和javascript间隔来编程动画，该间隔重置每个回合的位置。这样你可以随时用javascript重置属性和转换的持续时间。

我给你画了一支笔：http://codepen.io/vandervals/pen/aONmVL

这是你需要的css：

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

和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 个答案: