The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle.

.path {
    stroke-dasharray: 20;
    animation: dash 10s linear;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
     height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
     xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-width="2"
          d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
             1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
             1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</svg>
htmlcsssvg

Answer №1

Don't forget to include the infinite keyword in your CSS animation. You can find more information in the documentation.

.path {
    stroke-dasharray: 20;
    animation: dash 10s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
     height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
     xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-width="2"
          d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
             1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
             1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
    </svg>

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

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Gather updated information from a hover popup using Selenium and Python for a fresh data table integration

A few years ago, I successfully managed to scrape hover elements using Selenium. It was a bit challenging back then to select the correct hover table element that only appeared on hover. Recently, the website underwent a complete style overhaul, which seem ...

pythonhtmlseleniumscreen-scraping

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

What causes the div to not adjust to the browser window when the vertical size is decreased?

Imagine a basic HTML page like this: <doctype> <html> <head> <title>My Amazing Page</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head&g ...

jqueryhtmlcssresize

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

Stop users from being able to select or highlight text within a content editable div

Is there a method to develop a content-editable div where users are unable to select or highlight content, but can still input information? I'm interested in creating an interface that forces users to delete and enter data character by character, with ...

javascriptjqueryhtmlcssdom

Angular is sending a parameter with a null value, which is not supposed to happen

My filtering system used to work well with a code that displayed items of specific status. However, I had to modify it to match a select input requirement. <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button- ...

javascripthtmlangular

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

javascripthtml

Autocomplete feature enhanced with the ability to validate and clear out

Here's a snippet of my HTML code: <div class="form-group"> <label for="date_chargement" class="col-sm-4 control-label">Minimum loading date:</label> <div class="col-sm-2"> <input type="text" class="form-control te ...

javascriptjqueryhtmldatepicker

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

javascripthtmlcssangular

I'm not sure what the issue is with my navbar animation not functioning properly

My navbar has been styled with a transition that should ease in and out, but for some reason it's not working as expected. Even when I hover over the li a elements, the ease-in-out animation is not displaying, and I'm struggling to figure out wha ...

htmlcss

How to create a vibrant and colourful full background

How can I make the background color fill the entire width of the page? I am new to HTML and CSS, so below is the code I have used for setting the background. Please provide clear instructions on what changes I need to make in my code to achieve this. I kno ...

htmlcssbackground

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte

Allow only specified tags in the react-html-parser white list

Recently, I've been working on adding a comments feature to my projects and have come across an interesting challenge with mentioning users. When creating a link to the user's profile and parsing it using React HTML parser, I realized that there ...

javascripthtmlreactjstypescript

Creating a Dynamic List in JQuery Fancy Box for an iframe

I am new to using JQuery and I have a table with a checkbox. When the checkbox is clicked, I want a dynamic list to appear in a pop-up window. I've been having trouble implementing this. <html> <head> <label align="center">Select a ...

jqueryhtmljquery-uifancybox

Error: Property 'onclick' cannot be set on a null object

JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message: Uncaught TypeError: Cannot set property 'onclick' of null <script> var modal = document.getE ...

javascripthtmlcss

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

javascriptjquerycssjquery-uitooltip