Question

我有一个css过渡，可以在悬停时移动一个元素，也可以在悬停时旋转元素。动画的延迟等于转换持续时间，以便在转换到正确的位置后动画开始。然而，它工作得很好，当我们鼠标关闭时，动画会停止，但不会向下转换。

在鼠标关闭并且动画结束后，是否有可能让它过渡？

您可以在此处查看示例：http://codepen.io/jhealey5/pen/zvXBxM

此处简化代码：

    div {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        background-color: #b00;
        position: relative;

        &:hover {
            span {
                transform: translateY(-60px);
                animation-name: rotate;
                animation-duration: 1s;
                animation-delay: .5s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        }
    }

    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto;
        transition: .5s;
    }

    @keyframes rotate {
        from {
            transform: translateY(-60px) rotate(0);
        }
        to {
            transform: translateY(-60px) rotate(-90deg);
        }
    }

Answer 1

我已经分叉了你的项目并对其进行了调整以使其有效。 You can find it here.

我改变了以下内容：

我将白色方块设为top: 150px的起始位置，然后在hover的{{1}}上获取div。该范围得到top: 0，当鼠标离开时，它会在悬停时转到transition: top .5s，然后返回top: 0;。

我已从动画中移除了top: 150px;，因为当translateY(-60px);开始时，它会更加向上移动。

这是您的新CSS：

animation

编辑：问题是动画是基于时间的而不是基于动作的，这意味着一旦你触发动画，一个计时器开始运行，它将贯穿所有div { width: 200px; height: 200px; margin: 40px auto; background-color: #b00; position: relative; &:hover { span { top: 0px; animation: rotate 1s infinite .5s alternate; animation-direction: alternate; } } } span { position: absolute; width: 20px; height: 20px; background-color: #fff; bottom: 10px; left: 0; right: 0; top: 150px; margin: auto; transition: top .5s; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(-90deg); } }，直到设定时间已过。悬停和悬停没有任何效果，除了计时器可以提前停止，但动画将不会继续（或反转，你想要）之后。 keyframes是基于操作的，这意味着每次发生操作（例如transition）时都会触发它。在:hover上，这意味着转到:hover需要.5s，当悬停结束时，需要.5s才能到top:0。

我希望上面的补充是有道理的：）

正如您所看到的，我还在top:150px等处清理了一下，因为它可以组合成一行。

Answer 2

作为Harry pointed out，问题在于您正在动画/转换相同的属性，在本例中为transform。看起来当前版本的Chrome / FF将允许animation控制该属性，从而打破transition。似乎解决这个问题的唯一方法是转换/动画不同的属性。由于您需要继续旋转元素，因此可以通过更改bottom属性来转换/定位元素。我知道它不会产生完全相同的结果，但是，它确实会移动元素（只是不相对于父元素）。

Updated Example

div:hover  span {
  bottom: 80px;
}

作为替代方案，您还可以包装span元素，然后转换该元素。

在下面的示例中，.wrapper元素在悬停时转换为translateY(-60px)，然后轮换子span元素并维护动画。

Example Here

＆＃13;

div {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  background-color: #b00;
  position: relative;
}
div:hover .wrapper {
  transform: translateY(-60px);
}
div:hover .wrapper span {
  animation-name: rotate;
  animation-duration: 1s;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.wrapper {
  display: inline-block;
  transition: .5s;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
.wrapper span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-90deg);
  }
}

＆＃13;

<div>
  <span class="wrapper">
	  <span></span>
  </span>
</div>

＆＃13;

动画结束后的CSS转换

2 个答案: