所以我的代码工作得很好，它在<svg>上创建了一个笔画动画。标签!
问题是动画仅重复一次(当我刷新页面时)
我想无限循环动画，但我不知道如何!
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>最佳答案
尝试在动画中添加 infinite 属性:
#logo path:nth-child(1) {
stroke-dasharray: 788.711181640625px;
stroke-dashoffset: 788.711181640625px;
animation: line-anim 1.2s ease forwards infinite;
}
关于html - 如何在 SVG 标签上循环 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61362895/