动画结束后的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

我已付出你的项目，并适应它，所以它的工作原理。 You can find it here.

我已经改变如下：

我给白方的top: 150px起始位置，让它上的divhover，得到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:等，因为它可以组合成一条线。

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

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"> 
 
\t <span></span> 
 
    </span> 
 
</div>