Question

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s ease-in-out;
}
.box:hover {
  background: yellow;
}

<div class="box"></div>

如果光标在.box上方不到一秒钟，则转换停止并回落到原始阶段。有没有办法以某种方式强制整个动画，无论悬停持续时间？

fiddle

Answer 1

我认为你会为此使用JS。首先，您需要为背景更改创建动画，然后您可以将其设置为类并在悬停时添加该类，并在动画结束时或webkitAnimationEnd上删除它。

$('.box').hover(function() {
  $(this).addClass('animate');
  $(this).on('webkitAnimationEnd', function() {
    $(this).removeClass('animate');
  })
})

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  margin: 10px;
}
.box.animate {
  animation: changeColor 2s linear;
}
@keyframes changeColor {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>

Answer 2

我不认为你可以在没有javascript的情况下做到这一点，但找到它会很有趣。

轻量级javascript解决方案可能是这样的：

// Get the elemnt
var myDiv = document.getElementById('box');

// Detect hover
myDiv.onmouseover = function() { 
  // Add a force class to the element
  myDiv.className += " force";
  // Reset the cass name after 1sec (100ms)
  setTimeout(function(){ myDiv.className = "box"; }, 1000, myDiv);
}

稍微更改您的标记，以便现在更轻松：

<div id="box" class="box"></div>

在你的css样式中添加一个额外的类以及悬停状态：

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s ease-in-out;
}

.box.force,
.box:hover {
  background: yellow;
}

检查jsfiddle

Answer 3

修改：类似的解决方案，但依赖于过渡和动画：https://jsfiddle.net/ok7pnrsL/

这是我的解决方案：https://jsfiddle.net/9yu0cozq/1/

基本上你需要为盒子添加一个容器，然后使用CSS动画。

<div id="container">
    <div class="box"></div>
</div>

当鼠标进入.box时，会出现隐藏的容器（请注意，为此，容器应具有足够的宽度和高度以适合鼠标可能移动的整个区域）。这个容器为自己创建一个动画，以“隐藏”为1s。虽然它显示了.box同时有一个动画。

#container {
    position:absolute;
    z-index:1;
    width: 0;
    height: 0;
}
#container:hover{
    animation-name:changeSize;
    animation-duration: 1s;
}
#container:hover .box{
    animation-name:changeColor;
    animation-duration: 1s;
}
.box {
    z-index:0;
    position:absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition:1s background;
}
.box:hover {
    background: yellow;
}
@keyframes changeColor {
    0% {
    background: red;
    }
    100% {
    background: yellow;
    }
}
@keyframes changeSize {
    0%,99% {
    width: 100%;height: 100%;
    }
    100% {
    width: 0;height: 0;
    }
}

因此，在不了解真实背景的情况下，此解决方案提供了一系列假设，这些假设可能或可能不适合您的确切情况，但会给出如何使用纯CSS解决它的想法。

如何在元素上悬停时进行完全转换？

3 个答案: