CODEWITHSUNDEEP
cssanimationsvgcss-animations
sitkadude
sitkadude

Reputation: 1

Can't get my css keyframe hover drop-shadow animation to work on my svg

I found the CSS code at https://codepen.io/FelixRilling/pen/qzfoc to help me create a glowing hover effect on a line a text for a project I was working on. I am now trying to do the same effect on an entire svg file. I changed "text-shadow" to "filter: drop-shadow" but the glow/shadow does not appear. I have been able to successfully target the svg (using a basic fill hover effect). I want to know if this animation possible on an svg and if my problem is with my @keyframes syntax. Does anyone know how I can tweak this to make it work on an svg? Thanks!!

CSS


#ring {
    width: 15rem;
    height: auto;
    fill: rgb(92, 92, 92);
    padding-top: 5rem;

    text-decoration: none;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s;
}

#ring:hover {
    -webkit-animation: neon4 1s ease-in-out infinite alternate;
    -moz-animation: neon4 1s ease-in-out infinite alternate;
    animation: neon4 1s ease-in-out infinite alternate;
    fill: rgba(255, 249, 216, 0.988);
  }

/*-- Glow Animation --*/
@keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

  /*-- Glow for Webkit --*/
  @-webkit-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }   
  /*-- Glow for Mozilla --*/
  @-moz-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

Inline SVG


<svg version="1.0" xmlns="http://www.w3.org/2000/svg" id= "ring"
                        viewBox="0 0 1503.000000 1584.000000"
                        preserveAspectRatio="xMidYMid meet">

                        <g transform="translate(0.000000,1584.000000) scale(0.100000,-0.100000)"
                        fill="#000000" stroke="none">
                            <path id="ring" d="M6809 14732... 53z"/>
                        </g>
                    </svg>

Plug in any svg you want, my file was too big to post here. Here is the file im working with: http://svgur.com/s/3wu

Thanks!

Upvotes: 0

Views: 1929

Answers (1)

Kaiido
Kaiido

Reputation: 136746

The problem is with your drop-shadow function declaration. text-shadow allows to have multiple shadows applied as a single rule separated by commas ,. However, drop-shadow function accepts only a single shadow declaration per function. So you need to split all the text-shadows declarations in as many drop-shadow() functions in your filter rule:

#ring:hover {
  animation: neon4 1s ease-in-out infinite alternate;
}
@keyframes neon4 {
  from {
      filter: drop-shadow(0 0 10px #fff)drop-shadow( 0 0 20px #fff)drop-shadow( 0 0 30px #fff)drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 70px rgb(252, 226, 32))drop-shadow( 0 0 80px rgb(252, 226, 32))drop-shadow( 0 0 100px rgb(252, 226, 32))drop-shadow( 0 0 150px rgb(252, 226, 32));;
  }
  to {
      filter: drop-shadow(0 0 5px #fff)drop-shadow( 0 0 10px #fff)drop-shadow( 0 0 15px #fff)drop-shadow( 0 0 20px rgb(252, 226, 32))drop-shadow( 0 0 35px rgb(252, 226, 32))drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 50px rgb(252, 226, 32))drop-shadow( 0 0 75px rgb(252, 226, 32));
  }
}
<svg id="ring" width="84" height="84">
  <rect stroke="black" fill="none" x="2" y="2" width="80" height="80"/>
</svg>

Upvotes: 1

Related Questions