动画结束后的 CSS 过渡

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

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

Updated Example

div:hover  span {
  bottom: 80px;
}

---

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

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

Example Here

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

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

Answer 2

我已经对您的项目进行了分叉并对其进行了调整以使其正常工作。 You can find it here.

我所做的更改如下：

我给白色方块一个起始位置top: 150px，让它在div 的hover 上得到一个top: 0。跨度得到一个transition: top .5s，并在悬停时转到top: 0;，并在鼠标离开时返回top: 150px;。

我已经从动画中删除了translateY(-60px);，因为当animation 开始时，它会向上移动。

这是你的新 CSS：

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 上，这意味着需要0.5 秒才能到达top:0，而当悬停结束时，需要0.5 秒才能到达top:150px。

我希望上面的添加有意义:)

如您所见，我还清理了您的animation-name:等，因为它可以合并为一行。