Smoothly switching animations on hover - html

Question

I am working on a project that calls for multiple animated, moving icons that will stop, expand, and move to position on mouseover. Is there a pure CSS way to get an element to seamlessly start from whatever (mid-animation) position they are at when the hover event begins and transition to the new final keyframe properties, rather than starting from a set initial state?
#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

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

Answer 2

You can use animation-play-state: paused to pause the animation and expand the text on :hover with transition. Example:
#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>