Анимация SVG-значка при наведении

Question

Я пытаюсь анимировать значок линии SVG ТОЛЬКО при наведении курсора. Я хотел бы, чтобы это было stati c, когда он не завис. Я разработал, как анимировать эффект рисования, и я могу заставить его работать как при наведении. Однако, когда он проходит между ключевыми кадрами «от» и «до», тире становятся меньше, и это не создает Эффект плавного рисования, на который я надеялся. Я делаю это чисто HTML / CSS.

.bell_line:hover {
  animation: draw 3s linear forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset:92;
    stroke-dasharray: 92;
  }
  to {
    stroke-dashoffset:0;
    stroke-dasharray: 0;	
  }
} 

<div class="bell_line" style="margin-left: 100px;margin-top: 100px;">
  <svg class="bell_line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.85 38.83">
	<g data-name="bell_line" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10">
	  <path class="bell_line" d="M18.43 28.41l5.38-14.11v-3a5.62 5.62 0 0111.23 0v3l5.33 14.11zM29.38 5.67V.5M29.38 33.2v5.13"/>
	</g>
  </svg>
</div>

Answer 1

transition решит вашу проблему? Я обычно нахожу это более простым решением для парящих состояний.

Ваш css будет выглядеть примерно так:

.bell_line {    
  fill: none;
  stroke: black;
  stroke-dashoffset: 0;
  stroke-dasharray: 0;
  transition: stroke-dashoffset 2s ease;
}

.bell_line:hover {
  stroke-dashoffset: 92;
}

ИЛИ, если вы хотите анимировать два состояния (в вашем случае - отрисовка), вам нужно будет создать анимацию что dr aws покидает приборную панель по ее половине пути, а затем перерисовывает aws по завершению.

Примерно так:

@keyframes draw {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 90;
  }
  100% {
    stroke-dashoffset: 180;
  }
} 

.bell_line {    
  fill: none;
  stroke: black;
  stroke-dashoffset: 0;
  stroke-dasharray: 90;
}

.bell_line:hover {
  animation: draw 2s linear forwards;
}

Здесь мы только анимируем приборную панель, чтобы получить Эффект анимации затем сбросьте

Вот рабочий пример,

https://stackblitz.com/edit/react-bell-line

https://react-bell-line.stackblitz.io

Также просто помните, что состояние парения находится на пути. Вы всегда можете сделать состояние наведения на SVG, а затем указать путь.

svg:hover > .bell_line

Это будет означать, что вы можете создать большую область для цели с помощью мыши.