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

Question

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

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

body { 
 
    background-color: #fff; 
 
} 
 

 
svg { 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 600px; 
 
    height: 600px; 
 
} 
 

 
.path { 
 
    stroke-dashoffset: 1600; 
 
    stroke-dasharray: 1600; 
 
    -webkit-animation: draw 5s linear; 
 
    -moz-animation: draw 5s linear; 
 
    animation: draw 5s linear; 
 
    fill-opacity: 0; 
 
    -webkit-animation-delay: 1.2s; /* Safari and Chrome */ 
 
    animation-delay: 1.2s; 
 
} 
 

 
.path-first-o { 
 
    stroke-dashoffset: 1600; 
 
    stroke-dasharray: 1600; 
 
    -webkit-animation: draw 5s linear forwards; 
 
    -moz-animation: draw 5s linear forwards; 
 
    animation: draw 5s linear forwards; 
 
    fill-opacity: 0; 
 
} 
 

 
@-webkit-keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
} 
 

 
@-moz-keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
} 
 

 
@keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve"> 
 
    
 
<g id="layer_1"> 
 
    \t <g> 
 
     <path class="path-first-o" 
 
      fill="#027eb4" stroke="#027eb4" 
 
      d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/> 
 
    
 
    <path class="path-first-o" 
 
     fill="#027eb4" stroke="#027eb4" 
 
     d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" /> 
 
    <path 
 
     class="path-first-o" 
 
     fill="#027eb4" stroke="#027eb4" 
 
     d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" /> 
 
    </g> 
 
\t 
 
\t </g> 
 
</svg>

见CodePen这里

Answer 1

你只是缺少动画属性的forwards关键字。这是animation-fill-mode资产的价值（请参阅mdn）。
该值保留动画的最后一帧。

您也可以在animation shorthand像这样使用它：

body { 
 
    background-color: #fff; 
 
} 
 

 
svg { 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 600px; 
 
    height: 600px; 
 
} 
 
.path { 
 
    stroke-dashoffset: 1600; 
 
    stroke-dasharray: 1600; 
 
    -webkit-animation: draw 5s linear; 
 
    -moz-animation: draw 5s linear; 
 
    animation: draw 5s linear; 
 
    fill-opacity: 0; 
 
    -webkit-animation-delay: 1.2s; 
 
    /* Safari and Chrome */ 
 
    animation-delay: 1.2s; 
 
} 
 

 
.path-first-o { 
 
    stroke-dashoffset: 1600; 
 
    stroke-dasharray: 1600; 
 
    -webkit-animation: draw 5s linear forwards; 
 
    -moz-animation: draw 5s linear forwards; 
 
    animation: draw 5s linear forwards; 
 
    fill-opacity: 0; 
 
} 
 

 
@-webkit-keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
} 
 

 
@-moz-keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
} 
 

 
@keyframes draw { 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    fill-opacity: 0; 
 
    } 
 
    50% { 
 
    fill-opacity: 1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 1; 
 
    fill-opacity: 1; 
 
    } 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve"> 
 
    <g id="layer_1"> 
 
    <g> 
 
     <path class="path-first-o" 
 
     fill="#027eb4" stroke="#027eb4" 
 
     d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/> 
 
     <path class="path-first-o" 
 
     fill="#027eb4" stroke="#027eb4" 
 
     d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" /> 
 
     <path 
 
     class="path-first-o" 
 
     fill="#027eb4" stroke="#027eb4" 
 
     d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" /> 
 
    </g> 
 
\t </g> 
 
</svg>