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>