CODEWITHSUNDEEP
htmlcssanimationsvgdrop-shadow
danelig
danelig

Reputation: 383

Firefox drop-shadow CSS hover animation not working on SVG

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.

Upvotes: 0

Views: 119

Answers (1)

Ivan Bisultanov
Ivan Bisultanov

Reputation: 438

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

-webkit-animation-fill-mode: forwards;

Upvotes: 0

Related Questions