Floating ghost CSS animation - css

Question

I have created an SVG ghost for my website's logo. I have made a CSS animation so when a user hovers the logo, the ghost starts floating.
Everything works okay except that when it is unhovered, the ghost just drops back to it's original position. Is it possible to have it also animated when it returns to translateY(0)? I have tried a solution myself, but it doesn't work.
Here is the example:
#keyframes float {
100% {
transform: translateY(-8px);
}
}
#keyframes bob {
0% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
#keyframes sink {
100% {
transform: translateY(0);
}
}
#logo svg {
margin: 20px;
overflow: visible;
}
#logo #ghost {
animation-name: sink;
animation-duration: 0.3s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#logo:hover #ghost {
animation-name: float, bob;
animation-duration: 0.3s, 0.7s;
animation-timing-function: ease-out, ease-in-out;
animation-delay: 0s, 0.3s;
animation-direction: normal, alternate;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
}
<div id="logo">
<svg width="100" height="100">
<g id="ghost">
<rect fill="red" width="100" height="100" />
</g>
</svg>
</div>

Answer 1

It isn't all that difficult with JQuery.
Here's a function that can be called regularly with a setInterval() timer:
var haunt=function(){
var dy;
ghost_ticks++;
ghost_clock++;
if (ghost_clock>30) ghost_clock=30;
dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60); /* sine wave */
dy *= -40 + 6*Math.cos(ghost_ticks/5); /* ramp */
$("#ghost").css("transform","translate(0,"+dy+"px)");
if (ghost_clock==0) {
clearInterval(ghost_timer);
ghost_timer=ghost_ticks=0;
}
}
This calculates the ghost's position as the sum of two components — a sine-wave hovering motion, and a vertical offset that ramps up and down at the start and end of the animation and also controls the amplitude of the hovering.
This is done with two counter variables: ghost_ticks simply increments at every tick and is used to calculate the hovering position, while ghost_clock controls the ramp by counting up to 30 and then stopping. At the end of the animation, its value is made negative, so it counts back to zero, at which point the animation stops.
You can still use a CSS transition to change the ghost's colour.
var ghost_ticks=0, ghost_clock=0, ghost_timer=0;
var haunt=function(){
var dy;
ghost_ticks++;
ghost_clock++;
if (ghost_clock>30) ghost_clock=30;
dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);
dy *= -40 + 6*Math.cos(ghost_ticks/5);
$("#ghost").css("transform","translate(0,"+dy+"px)");
if (ghost_clock==0) {
clearInterval(ghost_timer);
ghost_timer=ghost_ticks=0;
}
}
var start_haunting=function(){
if (ghost_clock < 0) ghost_clock = -ghost_clock;
if (!ghost_clock) ghost_timer=setInterval(haunt,25);
};
var stop_haunting=function(){
if (ghost_clock > 0) ghost_clock = -ghost_clock;
};
$(document).ready(function(){
$("#logo").hover(start_haunting,stop_haunting);
});
#logo { background-color:#000; width: 200px; height: 200px; }
#logo #ghost { fill:#333; transition: fill 1s; }
#logo:hover #ghost { fill:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
<svg width="200" height="200" viewBox="0 0 200 200">
<g id="ghost" stroke="none">
<path d="M60 160V100A40 40 0 0 1 140 100V160l-10-10l-10 10l
-10-10l-10 10l-10-10l-10 10l-10-10ZM73 100a10 10 0
0 0 20 0 10 10 0 0 0 -20 0M107 100a10 10 0 0 0 20
0 10 10 0 0 0 -20 0z" />
</g>
</svg>
</div>