CODEWITHSUNDEEP
htmlcsssvg
Selenir
Selenir

Reputation: 718

SVG opacity animation on hover with CSS

I have SVG which contain two rings: inner and outer. I'm trying to create an animation, where svg on hovered shows inner ring instantly, and outer after 300ms.

I've tried with keyframes animation, but apparently I cannot trigger child element animation when parent is hovered. See this pen.

Upvotes: 0

Views: 1987

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18639

The problem was that you were triggering the keyframe animation on the <svg> element itself, then telling one of the elements inside it to have a delayed animation.

You can only add properties like animation-delay on the elements being animated, so I moved the animation to the <circle> elements. Here you go:

svg {
  width: 202px;
  height: 202px;
}

svg:hover circle {
  animation: show-inner 1s;
}

svg circle.ring-outer {
  animation-delay: 300ms;
}

@keyframes show-inner {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<svg viewbox="0 0 202 202" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="101" cy="101" r="100" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-outer"/>  
  <circle cx="101" cy="101" r="76" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-inner"/>  
</svg>

Upvotes: 2

Related Questions