On hover change animation with transition - html

Question

I need to change the animation with a transition effect. That is change first transition to another with a flow. When I tried for the same the animation changes with a fast change as in below snippet. Is there any way to animate the change in animation. I have tried the below code.
body{
background: url('https://i.pinimg.com/originals/0b/76/08/0b760848c89b9e4abd03f74f19419498.jpg');
}
.bubble{
top: 50px;
left: 80px;
height: 100px;
width: 100px;
color: #000;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.4);
transform: translatey(0px);
cursor: pointer;
position: absolute;
border: 10px solid rgba(255,255,255,0.2);
animation: float 4s ease-in-out infinite;
}
.bubble span {
font-size: 12px;
line-height: 85px;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
text-align: center;
border-radius: 50%;
background: red;
}
.bubble:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 50%;
box-shadow: 0 0 rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
0 0 0 16px rgba(255, 255, 255, 0.1), 0 0 0 24px rgba(255, 255, 255, 0.1);
z-index: -1;
animation: ripples 1s linear infinite;
animation-play-state: paused;
opacity: 0;
visibility: hidden;
transition: 0.5s;
transform: scale(0.5);
}
.bubble:hover {
transition: all 2s;
animation: tofixed 4s forwards;
box-shadow: none;
border-color: transparent;
}
.bubble:hover:before {
animation-play-state: running;
opacity: 1;
visibility: visible;
transform: scale(1);
}
#keyframes float {
0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
50% { box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px) scale(1); }
100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
}
#keyframes tofixed {
to { transform: translatey(0px) scale(0.9); }
}
#keyframes ripples {
to {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 0 16px rgba(255, 255, 255, 0.1),
0 0 0 24px rgba(255, 255, 255, 0.1), 0 0 0 32px rgba(255, 255, 255, 0);
}
}
<div class="bubble">
<span class="bgviolet">ODOSTORE</span>
</div>
In the above snippet you can see the change in animation is instantly when I hover on it.