Hovering over an SVG animation causes it to reset

I successfully animated an svg and it runs smoothly. The animation remains in place after completion thanks to the animation-fill-mode: forwards property I've set.

Currently, my svg html includes:

stroke="none"

In the @keyframes css, I have defined it as:

from{ stroke: none; }
to { stroke: #fff; }

Once the animation is complete, the strokes change color on :hover as intended. However, moving the cursor away resets the animation.

Is there a way for me to make the SVG revert back to its original #FFF stroke without restarting the animation after the hover effect concludes?

Check out my Codepen here

htmlcsssvg

Answer №1

The use of animation-timing-function: ease may not provide a smooth transition between values like none and #fff. Since one is a keyword and the other is a color value, using the opacity property for transitioning from "invisible" to "visible" would be more suitable. It's important to set the fill independently of the animation.

By keeping opacity at 1 after the animation and only changing the fill value on hover, you can achieve the desired effect without disabling the animation during hover actions.

@keyframes shield {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
#outer-left, #outer-btm-left, #outer-btm-right, #outer-right, #outer-top {
  animation-name: shield;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  stroke:#fff;
  opacity:0;
  }

#outer-left:hover {
  stroke: red;
}

#outer-btm-left:hover {
  stroke: red;
}

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

Concealing two div elements based on string content

I am working on a unique Wordpress blog post layout that showcases personnel profile cards, displaying 12 individuals at a time. Depending on whether or not a person has a Twitter handle entered in the backend, certain elements should either be shown or hi ...

javascripthtml

Laravel 4.2 email template not applying CSS inline style for text color

Working on setting up email functionality in Laravel 4.2 and I've got an email template ready to go. The data for the emails is stored in an array, but I'm running into an issue where if I pass a parameter like $variable, the styles are only bein ...

phphtmlcssemaillaravel-4

Vue Loader: Multiple loaders for a single file extension

Currently, I'm experimenting with incorporating SVG into my vue-loader/webpack template project. I'm in need of loading different types of SVGs: Icons: these are utilized within my components and loaded using svg-inline loader for customizatio ...

javascriptsvgwebpackvue.jsvue-loader

Difficulty implementing clickable dropdown buttons in a React navbar

After some tweaking, I was able to create buttons that trigger dropdown menus which disappear when clicked off. However, a problem arises when any button is clicked - all of the dropdowns appear at once. It appears that setting the state for one button a ...

javascripthtmlreactjsweb

Navigate through the seamless elements with scroll snapping

I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...

cssscroll

I am experiencing difficulty loading my image in HTML5

Despite using the correct syntax and having my image file in the same folder as my HTML document, I am facing an issue where the programmed image does not appear on the page when I load the document. What could be causing this? In this case, both my HTML ...

htmlimage

When there is no visible content on the mobile website, it starts scrolling horizontally to the right

Why is the website scrolling to the right when there is no content there? This issue seems to only occur on actual mobile devices when I try to recreate it. Currently in the process of transferring it over, which is why the link appears as it does. Any ...

csshtmltwitter-bootstrapbootstrap-4

Revealing child elements by expanding the absolute div from the center

I am trying to create a rectangular mask that expands on hover to display its children with varying heights. Currently, I have achieved this using an absolutely positioned div that adjusts its left, width, and max-height properties. However, I would like i ...

htmlcssabsolute

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...

csscontent-management-system

Taking control and altering the default alert() function using JavaScript

A while back, I managed to intercept alerts and replace the default browser popup with a modal of some sort. Unfortunately, I can't remember exactly how I did it, and my old code doesn't provide any clues. I've tried searching on Google with ...

javascriptjqueryhtmlalertappmobi

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

React is unable to locate an import statement for Material UI components

I am facing an issue while incorporating material UI components into my React project. The error message I receive is related to an invalid import. Snippet from My Component File import React from 'react' import './middle.css' import Mi ...

javascripthtmlreactjsmaterial-ui

PHP and Bootstrap combine in this dynamic carousel featuring thumbnail navigation

Looking to create a dynamic bootstrap carousel with image thumbnails at the bottom? After exploring various code snippets and solutions, I stumbled upon this link. While the code worked, I found the thumbnails to be too small. Below are the functions I use ...

javascriptphphtmlcsstwitter-bootstrap

Angular 2 partial static routing parameters with customizable features

Can an angular 2 routing configuration include a partial-static parameter? Currently, I am using a classic parameter setup like this: const routes: Routes = [ { path: ':type/fine.html', pathMatch: 'full', redirectTo: &ap ...

javascripthtmlangulartypescriptroutes

Struggles with embedding a table within a form while working with jQuery Mobile

Currently facing a problem trying to embed an HTML table inside a form in a jQuery Mobile environment. An error message pops up: Uncaught TypeError: Cannot read property 'not' of undefined The Chrome debugger points to this line in jquery.mobil ...

htmlformsjquery-mobilehtml-table

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

cssnativescriptnativescript-angular

Virtual Tour Engine for iOS Devices

Seeking recommendations on how to develop an offline 3D virtual tour app for iOS. Are there any specific engines or libraries that can facilitate this? Hotspot and audio file support is necessary. Appreciate any guidance. ...

ioshtmlvirtual-tour

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

javascriptjquerycss

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

javascriptjqueryhtmlfunctionjquery-ui

Solid Text Overlay on Transparent TextArea in JavaFX/CSS

In my JavaFX CSS style sheet, I currently have the following code for a tag called #myText in my FXML file. This code results in a black textArea with red text, which is exactly what I want. However, I now want to make the background of the textArea tran ...

javacssjavafxfxml