SVG绘图 - 动画后形状消失

Question

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

第一次尝试 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）。
该值保留动画的最后一帧。

您也可以像这样在 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>
 </g>
</svg>

SVG绘图 - 动画后形状消失

SVG drawing - shape vanishing after animation

css

animation

svg

keyframe

css-animations