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>