Hovering over an SVG icon will trigger an animation

I am trying to achieve an animated effect on an SVG line icon only when it is hovered over. I want the icon to remain static when not being hovered. While I have managed to animate the drawing effect and make it work somewhat on hover, I am facing an issue where the dashes of the line get smaller during the transition between the 'from' and 'to' keyframes, leading to a less smooth drawing effect than I had hoped for. I am working on this using only HTML and 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>

htmlcssanimationsvg

Answer №1

Considering using a transition could potentially resolve your issue. I personally find it to be a simpler solution for hover states.

Your CSS code would likely resemble the following:

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

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

If you wish to animate two distinct states (such as draw off and draw on), you will need to craft an animation that manipulates the dashoffset accordingly.

For instance:

@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;
}

In this implementation, we solely animate the dashoffset to generate the desired effect before resetting it.

Feel free to explore a live example at:

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

You can also view the output here:

Additionally, remember to ensure that the hover state is targeted specifically on the path element. Alternatively, you could designate the hover state on the SVG element and then reference the path within it.

svg:hover > .bell_line

This approach allows for a larger interactive area when interacting with the graphic using a mouse.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to thwart CSRF attacks?

I am currently looking for ways to protect my API from CSRF attacks in my Express app using Node.js. Despite searching on both Google and YouTube, I have been unable to find a solution that works for me. One tutorial I watched on YouTube recommended gene ...

javascripthtmlnode.jsexpresscsrf

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

javascripthtmlcsslayoutflexbox

Title showcasing the index of a website

Help Needed: How to Remove "Index of /" Title on Google Search for Jobbulls Website Hello folks, I recently uploaded all the files for my website and when I search for my domain name on Google, it shows a page with the title "Index of /" listing out all t ...

htmlgoogle-search-console

How can you ensure that an inline <span> automatically moves to the next line if it is too wide?

Struggling with bootstrap badges and trying to arrange <span> elements to appear on the next line when they are too large. On mobile, my page looks like this: Joe Bloggs (Bigger Badge) Joe Bloggs Brother (SMALL BADGE) How can I configure it so t ...

htmlangularbootstrap-5

Discover the nodes with the highest connections in a D3 Force Graph

As I explore the functionalities of a D3 Force Directed Graph with zoom and pan features, I encounter an issue due to my limited knowledge of d3.js. Is there a way to estimate the number of links for each node in this scenario? I am currently at a loss on ...

javascripthtmld3.js

Shifting the placement of a button with the help of bootstrap

Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...

csstwitter-bootstrap

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

htmlcsscss-position

The reflight response received an unexpected HTTP status code of 500

Recently, I've been working on utilizing the Yelp Fusion API by making a simple ajax call. I started off by using the client_id and client_secret provided by Yelp to successfully obtain an access token through a 'POST' request in Postman, fo ...

javascriptjqueryhtmlajaxyelp

Basic image slider featuring adjustable heights

I'm currently working on a basic content slider, but I've encountered an issue where the container doesn't expand as new content slides in. It seems to be related to the absolute positioning of the content items. If I don't use absolute ...

jqueryjquery-uicss

CSS selectors duplication can cause confusion and make code harder to maintain. SCSS

If we have style definitions like the following: .a.b { ... } .a.b.c { ... } Is there a method in SASS/SCSS to prevent duplication of the .a.b part? ...

csscss-selectorscompass-sasssass

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

phpjavascripthtmlcsstwitter-bootstrap

When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

I have two files, one HTML and one CSS. The HTML file contains the following code: <div class="app"> <div class="header"></div> <div class="main"> <div class="container_1"> ...

htmlcss

Steps to create a clickable button wrapper label in React

Contained within the components below: <CheckboxGroupLabel htmlFor={option.label}> <FormCheckbox onClick={() => onChange} key={option.label} defaultChecked={defaultChecked} {...rest} /> {option.value} ...

javascripthtmlcssreactjslabel

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Ways to adjust the ngx-pagination color scheme?

I am looking to customize the background color of ngx-pagination Here is my current code: <pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previ ...

cssangular

Is it feasible to have content wrap around a Grid-Item?

I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following parag ...

htmlcsscss-grid

Unable to adjust font weight as intended

I'm encountering an issue with getting the lighter font weights to display correctly. Despite having all the necessary font weights installed on my computer, it seems that many fonts do not support the lighter options. What could be causing this incon ...

htmlcssfonts

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

javascripthtmlcss

Modify the HTML select tag to toggle from a selected checkbox

What should I do when a certain option is checked in the checkbox, and that label needs to be shown in the select tag? https://i.stack.imgur.com/ZxRNF.png Checkbox input <input type="checkbox" class="toggle-product pull-right" @if(!isset($restrictedPr ...

javascriptphpjqueryhtmllaravel