動畫結束後的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>