平滑切換懸停的動畫

Question

我正在研究一個項目，該項目需要多個動畫，移動圖標，這些圖標將停止，展開並移動到mouseover上的位置。有沒有一種純粹的CSS方式來讓元素從懸停事件開始時的任何（中間動畫）位置無縫啓動並轉換到新的最終關鍵幀屬性，而不是從初始狀態開始？

@keyframes drop { 
from {top:-100px;} 
to {top:100px;} 
} 
@keyframes freeze { 
to {left:10px; width:700px;} 
} 

.droptext { 
position:absolute; 
width: 100px; 
height: 100px; 
background-color: red; 
animation: drop 2s linear infinite; 
-webkit-animation: drop 2s linear infinite; 
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
transition: width 2s; 
} 
.droptext:hover { 
z-index:99; 
-webkit-animation: freeze 2s linear 1s forwards; 
-webkit-transition: top:10px; 
} 

Answer 1

試試這個

.droptext:hover { 
-webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
} 

Answer 2

您可以使用animation-play-state: paused暫停動畫和擴大:hover過渡的文本。例如：

@keyframes drop { 
 
    0% { 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
    50% { 
 
    top: 200px; 
 
    left: 300px; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
} 
 

 
.text { 
 
    width: 100px; 
 
    height: 20px; 
 
    position: relative; 
 
    padding: 20px; 
 
    border: 1px solid #ddd; 
 
    left: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    transition: all .5s ease-in-out; 
 
    animation: drop 10s linear infinite; 
 
} 
 
.text:hover { 
 
    width: 400px; 
 
    height: 60px; 
 
    animation-play-state: paused; 
 
    transform: translate(-20px, 20px); 
 
}

<div class="text">Lorem ipsum dolor sit amet blah blah</div>