bux23
2/3/2018 - 8:09 PM

svg animate draw

.Animate-Draw {
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  
  animation-name: DrawLine, FillIn;
  animation-duration: 10s;
}

@keyframes DrawLine {
  0%   { stroke-dashOffset: 1000; }
  48%  { stroke-dashOffset: 0; }
  96%  { stroke-dashOffset: 1000; }
  100% { stroke-dashOffset: 1000; }
}

@keyframes FillIn {
  0%   { fill-opacity: 0; }
  15%  { fill-opacity: 0; }
  30%  { fill-opacity: 1; }
  70%  { fill-opacity: 1; }
  85%  { fill-opacity: 0; }
  100% { fill-opacity: 0; }
}