Css SVG绘图-动画后形状消失

我有一个正在制作动画/绘制的形状，这很好，当动画完成后，形状会在页面上保留几秒钟，然后消失

第一次尝试CSS动画，所以我不完全理解为什么它会从页面上消失，我知道这可能是非常明显的事情，但任何帮助指针都将不胜感激

正文{
背景色：#fff；
}
svg{
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
宽度：600px；
高度：600px；
}
.路径{
行程偏移：1600；
行程：1600；
-webkit动画：画5s线性；
-moz动画：画5s线性；
动画：画5s直线；
填充不透明度：0；
-webkit动画延迟：1.2s；/*Safari和Chrome*/
动画延迟：1.2s；
}
.path-first-o{
行程偏移：1600；
行程：1600；
-webkit动画：向前画5s线性；
-moz动画：向前画5s直线；
动画：向前画5s直线；
填充不透明度：0；
}
@-webkit关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@-moz关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}

---

您只是缺少动画属性的

转发

关键字。它是

动画填充模式

属性的a值（请参阅）。
此值保留动画的最后一帧

您也可以在以下情况下使用它：

正文{
背景色：#fff；
}
svg{
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
宽度：600px；
高度：600px；
}
.路径{
行程偏移：1600；
行程：1600；
-webkit动画：画5s线性；
-moz动画：画5s线性；
动画：画5s直线；
填充不透明度：0；
-webkit动画延迟：1.2s；
/*狩猎与铬*/
动画延迟：1.2s；
}
.path-first-o{
行程偏移：1600；
行程：1600；
-webkit动画：向前画5s线性；
-moz动画：向前画5s直线；
动画：向前画5s直线；
填充不透明度：0；
}
@-webkit关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@-moz关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}

---

您只是缺少动画属性的

转发

关键字。它是

动画填充模式

属性的a值（请参阅）。
此值保留动画的最后一帧

您也可以在以下情况下使用它：

正文{
背景色：#fff；
}
svg{
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
宽度：600px；
高度：600px；
}
.路径{
行程偏移：1600；
行程：1600；
-webkit动画：画5s线性；
-moz动画：画5s线性；
动画：画5s直线；
填充不透明度：0；
-webkit动画延迟：1.2s；
/*狩猎与铬*/
动画延迟：1.2s；
}
.path-first-o{
行程偏移：1600；
行程：1600；
-webkit动画：向前画5s线性；
-moz动画：向前画5s直线；
动画：向前画5s直线；
填充不透明度：0；
}
@-webkit关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@-moz关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}
@关键帧绘制{
30% {
笔划偏移：0；
填充不透明度：0；
}
50% {
填充不透明度：1；
}
100% {
行程偏移：1；
填充不透明度：1；
}
}

谢谢，我们将再次阅读文档！谢谢，我会再看一遍这些文件的！