mizech mizech - 1 month ago 10
CSS Question

CSS- / SVG-animation : Why isn't the hover-state triggered immediately?

I have made this animated icon with CSS and SVG:



.twitter-outline {
fill: none;
stroke: #4099ff;
}

.twitter-icon {
fill: transparent;
stroke: transparent;
}

.twitter-outline, .twitter-icon {
transition: 600ms all;
transform-origin: 50% 50%;
}

.twitter-icon-group:hover .twitter-outline {
transform: scale(0);
opacity: 0;
}

.twitter-icon-group:hover .twitter-icon {
transform: scale(2);
fill: #4099ff;
opacity: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
<g class="twitter-icon-group">
<circle class="twitter-outline" cx="110.6" cy="100.5" r="35.2"/>

<path fill="#4099ff" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>

<path class="twitter-icon" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>
</g>
</svg>





If one hovers with the mouse point over the icon then the outer circle shall vanish.

It works. But one has to reach far into the circle with the mouse pointer. When one reaches the bird (almost) then the animation is triggered.

I would expect it to be triggered immediately after the circle is hovered.

Because that's what my code says: " .twitter-icon-group:hover .twitter-outline { "

What goes wrong here? I have already tried to remove padding on the SVG group. But that haven't work.

How can get it to trigger the hover-state when then circle it hovered?

Answer

It's because the circle has no fill and so only the actual 'path' can be hovered.

Just change that fill to transparent.

.twitter-outline {
  fill: transparent;
  stroke: #4099ff;
}
.twitter-icon {
  fill: transparent;
  stroke: transparent;
}
.twitter-outline,
.twitter-icon {
  transition: 600ms all;
  transform-origin: 50% 50%;
}
.twitter-icon-group:hover .twitter-outline {
  transform: scale(0);
  opacity: 0;
}
.twitter-icon-group:hover .twitter-icon {
  transform: scale(2);
  fill: #4099ff;
  opacity: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
  <g class="twitter-icon-group">
    <circle class="twitter-outline" cx="110.6" cy="100.5" r="35.2" />

    <path fill="#4099ff" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"
    />

    <path class="twitter-icon" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"
    />
  </g>
</svg>