How to change start point of animation in CSS?

138
February 17, 2022, at 6:40 PM

I want to change the start point of the SVG path animation. I am a beginner in SVG paths, so might be a dumb question. Currently, the animation I have does the opposite of what I want. I need the path animation to start from the bottom circle and go to the top circle. I have tried the width:0 trick to do this but it does the opposite of what I want. Can anyone help me out? If code doesn't work
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        .forward-line {
            stroke-dasharray: 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 19;
            stroke-dashoffset: 300;
            animation: dash 5s linear 0s reverse infinite,  appear 5s linear 0s;
        }
        .reverse-line {
            stroke-dasharray: 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 19;
            stroke-dashoffset: 300;
            animation: dash 5s linear 0s forwards infinite,  appear 5s linear 0s;
            /* animation: appear 5s linear 0s;  */
        }
        @keyframes dash {
            from {
                stroke-dashoffset: 300;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
        @keyframes appear{
            from {
                opacity: 0;
                width: 0%;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div>
        <svg width="200" height="200" style="display: block;margin-left: 2%;">
            <circle cx="100" cy="100" r="75" stroke="green" stroke-width="4" fill="yellow" />
            <text x="50%" y="50%" text-anchor="middle">TEXT</text>
        </svg>
    </div>
    <svg class="forward-line" width="100%" height="100%" style="position:absolute;top: 0px;z-index: -10;">
        <!--STARTING-X  STARTING-Y q CURVE-WIDTH CURVE-HEIGHT ENDPOINT-X ENPOINT-Y-->
        <path d="M 100 100 q 150 150 300 100 q 150 -50 250 100 q 150 150 300 100 q 150 -50 250 100" stroke="blue" stroke-width="5" fill="none" />
    </svg>
    <div>
        <svg width="200" height="200" style="margin-left: 45%;">
            <circle cx="100" cy="100" r="50" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </div>
    <div>
        <svg width="200" height="200" style="margin-left: 90%;">
            <circle cx="100" cy="100" r="50" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </div>
</body>
</html>
Rent Charter Buses Company
READ ALSO
Making an image stay at the bottom of the page but not go over content

Making an image stay at the bottom of the page but not go over content

I have an a logo image that is supposed to remain at the bottom of a nav drawerThe only way I know to have it be at the bottom is with the absolute and bottom properties, but that's causing it to overlap the list items on a short device (shrink the height...

120
How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

I've seen multiple ways involving JS/Jquery that allow enabling a second select element (from a disabled state) once the first select element option has been chosen, but I am wondering if anyone can share how to accomplish this with CSS

144
Overlaying an image while scrolling

Overlaying an image while scrolling

If you look at the picture attached you can see a picture of a person then a white space with a border radiusI wanted to know if there is a way while scrolling down for the white space the overflow the image, and while scrolling up to show the image again

95
How to fix a SCSS to CSS Error: Funtion backgroud

How to fix a SCSS to CSS Error: Funtion backgroud

This is a massive themescss

139