Firefox drop-shadow CSS hover animation not working on SVG

Question

Codepen Example

When you hover over the logo in Chrome the animation works.

  .logo_animate:hover{
    -webkit-filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-1px 0px .02px 
    #705C12) drop-shadow(2px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) 
    drop-shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
    shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
    shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-5px 0px .02px #705C12) 
    drop-shadow(-.02px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) drop- 
   shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
   shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
   shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    stroke: #fff59d;
   }

When you hover over the logo in Firefox it starts the animation on "mouseout" (not using Javascript but this is the effect).

Why isn't Firefox triggering the CSS changes on hover over the SVG?

Thank you in advance.

Answer 1

For me it works in the same way in Chrome & Firefox without this line:

-webkit-animation-fill-mode: forwards;