我是CSS动画的新手，我很难让this animation工作。
我一直关注此CSS Tricks post。
目前我不明白为什么动画中有三个独立的起点。
我想从一点开始，一路跟踪路径（不管哪个方向不重要）并在起点关闭动画。
这可能吗？如果是的话，任何人都能说出我迄今为止所尝试过的错误吗？
感谢任何帮助，谢谢。
这是演示中的代码（我已经删除了一些svg代码）：
HTML
<svg xmlns="http://www.w3.org/2000/svg"
width="3.27778in" height="3.27778in"
viewBox="0 0 236 236">
<path class="path"
fill="none" stroke="black" stroke-width="2"
d="M 236.00,0.00
C 236.00,0.00 236.00,236.00 236.00,236.00
236.00,236.00 0.00,236.00 0.00,236.00
0.00,236.00 0.00,0.00 0.00,0.00
0.00,0.00 236.00,0.00 236.00,0.00 Z
M 74.00,34.00
.........
C 212.00,194.00 213.00,195.00 213.00,195.00
213.00,195.00 213.00,194.00 213.00,194.00
213.00,194.00 212.00,194.00 212.00,194.00 Z" />
</svg>
CSS
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
答案 0 :(得分：1)
好吧，根据路径的长度增加stroke-dasharray和stroke-dashoffset。
.path {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: dash 20s 1;
}
@keyframes dash {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}<svg xmlns="http://www.w3.org/2000/svg" width="3.27778in" height="3.27778in" viewBox="0 0 236 236">
<path class="path" fill="none" stroke="black" stroke-width="2" d="M 236.00,0.00
C 236.00,0.00 236.00,236.00 236.00,236.00
236.00,236.00 0.00,236.00 0.00,236.00
0.00,236.00 0.00,0.00 0.00,0.00
0.00,0.00 236.00,0.00 236.00,0.00 Z
M 74.00,34.00
C 74.00,34.00 54.00,32.00 54.00,32.00
59.73,35.89 69.12,35.68 73.85,38.93
79.05,42.49 78.36,58.39 77.00,64.00
77.00,64.00 52.00,59.00 52.00,59.00
56.43,65.82 63.78,61.04 74.00,68.00
74.00,68.00 56.00,73.60 56.00,73.60
53.01,74.57 49.98,76.06 47.41,73.60
42.33,68.43 42.77,58.02 36.00,54.00
37.16,61.37 39.83,64.58 41.93,71.00
42.50,72.72 43.33,75.43 41.33,76.58
37.06,79.03 24.82,72.09 19.00,76.00
19.00,76.00 38.00,81.00 38.00,81.00
33.28,87.05 24.22,90.79 22.00,98.00
25.49,96.51 38.29,87.36 40.23,84.42
41.25,82.88 40.80,82.84 41.00,82.00
41.00,82.00 51.00,78.35 51.00,78.35
51.00,78.35 67.00,73.71 67.00,73.71
67.00,73.71 76.78,71.78 76.78,71.78
76.78,71.78 80.48,77.00 80.48,77.00
80.48,77.00 84.00,94.00 84.00,94.00
80.23,94.67 68.20,96.98 66.90,91.85
66.30,89.47 68.62,85.59 69.00,80.00
69.00,80.00 62.49,90.82 62.49,90.82
62.49,90.82 54.00,94.00 54.00,94.00
53.19,91.30 52.67,91.77 50.00,92.00
55.87,98.01 60.01,94.59 59.00,105.00
59.00,105.00 67.04,98.60 67.04,98.60
67.04,98.60 85.00,97.00 85.00,97.00
85.00,97.00 85.00,137.00 85.00,137.00
84.98,139.36 85.24,144.44 82.43,145.40
78.77,146.65 74.50,140.67 67.00,142.00
66.14,138.99 64.94,139.35 62.00,139.00
66.19,145.51 79.71,146.43 81.72,152.10
82.81,155.18 78.24,162.07 76.76,165.00
72.50,173.39 63.37,188.40 62.00,197.00
66.37,194.37 68.03,189.44 70.25,185.00
70.25,185.00 81.20,164.00 81.20,164.00
82.99,160.47 85.05,155.01 88.21,152.58
91.43,150.11 107.98,148.29 113.00,147.39
118.23,146.44 139.09,142.56 143.00,143.43
146.22,144.15 150.15,147.14 153.00,148.95
156.73,151.31 162.68,154.48 165.62,157.47
167.98,159.86 176.04,174.12 178.23,177.96
180.57,182.08 185.22,189.63 186.18,194.00
188.01,200.41 183.51,204.14 186.18,213.00
186.18,213.00 189.00,201.00 189.00,201.00
197.09,203.50 195.76,209.52 201.00,215.00
201.34,212.28 201.90,210.92 199.00,210.00
200.88,201.68 194.91,200.49 195.16,196.14
195.53,189.51 209.51,193.23 213.00,193.00
214.14,196.54 214.51,196.72 218.00,198.00
216.38,192.94 210.53,188.45 205.00,188.72
202.79,188.83 196.24,191.04 193.02,190.77
189.28,190.45 188.47,187.82 185.00,187.00
185.29,180.69 179.76,173.45 176.72,168.00
175.82,166.37 173.22,162.54 174.82,160.96
176.23,159.22 180.29,160.67 182.00,160.96
187.91,162.78 194.92,165.87 201.00,165.00
203.49,168.01 206.30,167.83 210.00,168.00
207.31,163.72 204.56,164.32 200.00,162.96
200.00,162.96 180.00,157.00 180.00,157.00
180.00,157.00 180.00,155.00 180.00,155.00
180.00,155.00 200.00,147.56 200.00,147.56
205.16,145.97 211.08,144.92 214.00,140.00
211.30,140.62 210.78,140.28 210.00,143.00
198.29,140.73 177.85,157.17 166.00,152.46
163.52,151.47 157.21,147.50 155.08,145.82
153.77,144.79 151.81,143.36 152.91,141.46
155.31,137.34 165.47,139.09 169.00,134.00
169.00,134.00 149.00,138.00 149.00,138.00
149.00,138.00 154.00,123.00 154.00,123.00
150.14,126.04 148.18,127.93 148.00,133.00
142.79,134.17 143.44,138.55 137.98,140.35
137.98,140.35 102.00,146.46 102.00,146.46
98.91,146.76 92.01,148.56 89.46,146.46
87.21,145.00 88.05,139.63 87.99,137.00
87.99,137.00 87.32,127.00 87.32,127.00
87.65,122.58 88.21,118.48 87.91,114.00
87.65,110.06 86.61,103.73 88.50,100.05
89.97,97.18 93.15,96.23 96.00,95.23
96.00,95.23 120.00,88.65 120.00,88.65
127.37,88.71 132.25,96.11 141.00,95.00
141.00,95.00 140.00,97.00 140.00,97.00
140.00,97.00 143.00,95.00 143.00,95.00
139.30,93.02 125.70,87.57 124.97,83.82
124.47,81.20 127.61,77.01 128.00,69.00
122.58,74.14 124.27,77.91 120.35,82.89
116.77,87.46 104.77,89.54 99.00,91.34
96.79,92.03 92.33,93.67 90.13,93.10
88.00,92.55 87.16,90.87 86.40,88.98
84.97,85.43 81.60,72.39 84.48,69.60
87.04,67.12 101.06,67.00 105.00,67.00
105.00,67.00 105.00,63.84 105.00,63.84
102.31,64.22 93.70,66.01 91.98,63.84
90.84,62.15 93.11,60.04 94.09,59.05
98.59,54.49 100.21,54.33 106.00,53.00
107.07,57.60 111.67,59.00 116.00,59.00
116.00,59.00 107.00,50.00 107.00,50.00
111.64,48.49 119.25,48.00 122.00,44.00
122.00,44.00 109.00,45.00 109.00,45.00
109.00,45.00 113.00,36.00 113.00,36.00
107.32,37.82 104.51,43.68 100.71,48.00
96.69,52.57 87.45,60.47 82.21,63.00
81.01,57.47 78.09,42.68 82.21,38.70
87.21,34.31 102.19,32.67 106.00,27.00
106.00,27.00 85.00,33.00 85.00,33.00
85.00,33.00 90.00,21.00 90.00,21.00
85.47,22.46 84.17,24.25 84.00,29.00
84.00,29.00 78.90,30.83 78.90,30.83
78.90,30.83 70.00,20.00 70.00,20.00
70.00,20.00 69.00,16.00 69.00,16.00
66.10,20.90 71.91,29.16 74.00,34.00 Z
M 88.00,34.00
C 88.00,34.00 87.00,35.00 87.00,35.00
87.00,35.00 87.00,34.00 87.00,34.00
87.00,34.00 88.00,34.00 88.00,34.00 Z
M 103.00,49.00
C 103.00,49.00 102.00,50.00 102.00,50.00
102.00,50.00 102.00,49.00 102.00,49.00
102.00,49.00 103.00,49.00 103.00,49.00 Z
M 105.00,65.00
C 105.00,65.00 106.00,66.00 106.00,66.00
106.00,66.00 106.00,65.00 106.00,65.00
106.00,65.00 105.00,65.00 105.00,65.00 Z
M 22.00,75.00
C 22.00,75.00 21.00,76.00 21.00,76.00
21.00,76.00 21.00,75.00 21.00,75.00
21.00,75.00 22.00,75.00 22.00,75.00 Z
M 126.00,75.00
C 126.00,75.00 125.00,76.00 125.00,76.00
125.00,76.00 125.00,75.00 125.00,75.00
125.00,75.00 126.00,75.00 126.00,75.00 Z
M 196.00,147.00
C 196.00,147.00 195.00,148.00 195.00,148.00
195.00,148.00 195.00,147.00 195.00,147.00
195.00,147.00 196.00,147.00 196.00,147.00 Z
M 156.00,148.00
C 156.00,148.00 155.00,149.00 155.00,149.00
155.00,149.00 155.00,148.00 155.00,148.00
155.00,148.00 156.00,148.00 156.00,148.00 Z
M 212.00,194.00
C 212.00,194.00 213.00,195.00 213.00,195.00
213.00,195.00 213.00,194.00 213.00,194.00
213.00,194.00 212.00,194.00 212.00,194.00 Z" />
</svg>