Рисунок 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">
     <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>
 
 </g>
</svg>

Смотрите CodePen здесь

Answer 1

Вы просто скучаете по forwards Ключевое слово для свойства анимации. Это значение для animation-fill-mode собственность (см. MDN).
Это значение сохраняет последний кадр анимации.

Вы также можете использовать его в сокращенной анимации следующим образом:

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>
 </g>
</svg>