1

I have a shape being animated/drawn which is fine, when the animation is done the shape remains on the page for a couple seconds then vanishes.

First time trying out CSS animations so don't fully understand why it vanishes off the page, I know it's probably something really obvious but any help pointers would be much appreciated.

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>

See CodePen here

web-tiki
  • 99,765
  • 32
  • 217
  • 249
J Foley
  • 1,038
  • 1
  • 17
  • 30

1 Answers1

5

You are just missing the forwards keyword for the animation property. It is the a value for the animation-fill-mode property (see mdn).
This value keeps the last frame of the animation.

You can also use it in the animation shorthand like this :

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>
web-tiki
  • 99,765
  • 32
  • 217
  • 249