Как сделать анимацию l oop CSS на теге SVG - PullRequest
Новая
       89

Как сделать анимацию l oop CSS на теге SVG

2 голосов
/ 22 апреля 2020

Так что мой код работает отлично, он создает анимацию обводки для тега <svg>!

Проблема в том, что анимация повторяется только один раз (когда я переосмысливаю sh страницу)

Я хочу бесконечность l oop анимации, но я не знаю, как! 

   body{
        background-color: yellow;
    }
    
    #logo{
        position: absolute;
        top: 50%;
        left: 50%;
    	transform: translate(-50%,-50%);
        animation: fill 0.6s ease forwards 1.3s;
    
    }
    
    #logo path:nth-child(1) {
            stroke-dasharray: 788.711181640625px;
            stroke-dashoffset: 788.711181640625px;
        animation: line-anim 1.2s ease forwards;
    }
    
    @keyframes line-anim{
        to{
            stroke-dashoffset: 0;
        }
    }
    
    
    @keyframes fill {
        from{
            fill: transparent;
        }
        
        to{
            fill: white;
        }
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <svg id="logo" width="313" height="302" viewBox="0 0 313 302" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M223.4 157.2C232.2 160.1 237 169.6 234.1 178.4C231.8 185.3 225.4 189.9 218.2 189.9C211.2 189.9 205 185.6 202.5 179.1H184.7C182.3 179.1 180.2 177.5 179.4 175.3L173.9 158.8L156.6 219.4C155.9 221.8 153.7 223.4 151.2 223.4H150.9C148.3 223.3 146.1 221.3 145.7 218.8L127.8 111.3L114.7 174.9C114.1 177.4 111.9 179.1 109.3 179.1H84.2C81.1 179.2 78.5 176.8 78.4 173.7C78.3 170.6 80.7 168 83.7 167.9C83.9 167.9 84 167.9 84.2 167.9H104.9L123.4 82.4C124.1 79.4 127.2 77.5 130.2 78.3C132.4 78.8 134.1 80.7 134.4 82.9L152.7 192.5L168.2 138.3C168.9 136 171 134.3 173.4 134.3H173.5C175.9 134.3 178 135.9 178.8 138.1L188.7 167.9H202.3C205.1 159.1 214.6 154.3 223.4 157.2Z" stroke="black" stroke-width="5"/>
    <path d="M313 85.4C313 113.2 300.8 152.7 277.1 185.1C231.9 247 156.7 301.1 156.7 301.1C156.7 301.1 81.5 247 36.3 185.1C12.5 152.6 0.399994 113.2 0.399994 85.4C0.399994 38.8 38 0.9 84.6 0.5H85.4C115.2 0.5 141.6 16.3 156.8 39.6C172 16.3 198.4 0.5 228.2 0.5H229C275.5 0.9 313 38.8 313 85.4ZM234.1 178.4C237 169.6 232.2 160.1 223.4 157.2C214.6 154.3 205.1 159.1 202.2 167.9H188.6L178.7 138.1C177.9 135.8 175.8 134.3 173.4 134.3H173.3C170.9 134.3 168.7 136 168.1 138.3L152.6 192.5L134.3 82.9C133.9 80.6 132.3 78.8 130.1 78.3C127.1 77.6 124 79.4 123.3 82.4L104.8 167.9H84.1C83.9 167.9 83.8 167.9 83.6 167.9C80.5 168 78.1 170.6 78.3 173.7C78.4 176.8 81 179.2 84.1 179.1H109.2C111.8 179.1 114 177.4 114.6 174.9L127.7 111.3L145.6 218.8C146 221.4 148.2 223.3 150.8 223.4H151.1C153.6 223.4 155.8 221.8 156.5 219.4L173.8 158.8L179.3 175.3C180.1 177.6 182.2 179.1 184.6 179.1H202.4C204.9 185.6 211.1 189.9 218.1 189.9C225.4 189.9 231.8 185.3 234.1 178.4Z" fill="#6C63FF"/>
    </svg>
    
    </body>
    </html>

1 Ответ

1 голос
/ 22 апреля 2020

Попробуйте добавить infinite реквизит для вашей анимации: 

#logo path:nth-child(1) {
        stroke-dasharray: 788.711181640625px;
        stroke-dashoffset: 788.711181640625px;
        animation: line-anim 1.2s ease forwards infinite;
}
...