html - 悬停时平滑切换动画

Question

我正在从事一个元素，该元素需要多个动画、移动图标，这些图标将在鼠标悬停时停止、展开和移动到某个位置。是否有纯 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;
}