Animate dot after dot from an image using CSS3 or jQuery

Question

I want to animate dot after dot from the below image but my problem is with the curved section of the image (bottom of the image).

At the start, all dots should be hidden and then one by one each dot should be animated into view.

I have the below code:

<div id="dots1"></div>

#dots1 {
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -webkit-transition: height 1s linear;
    transition: height 1s linear;
    position: absolute;
    left: 50%;
    z-index: 1;
    margin: 0 0 0 -1px;
    width: 3px;
    height: 0;
    background: url(image/pic.png) 0 0 no-repeat;
}

Answer 1

You can achieve this effect using two SVG path elements like in the below snippet. Two paths in the form of the curved line that you need is created. One path (which is at the bottom) has the dot pattern for the stroke (black colored) and another duplicate path which is on top. The duplicate path stroke is set such that for one full length of the path it is white in color and for another length it is transparent.

An animation is added on the duplicate path to animate stroke's offset. As offset is animated, the white portion of the stroke slowly moves out of view and the transparent portion starts coming into view. As the white portion starts going out of view, the black dots below it start getting revealed.

It is a bit complex to understand at start but once you get familiar with path, stroke-dasharray and stroke-dashoffset it will look simple.

svg {
  height: 400px;
}
path {
  fill: none;
}
path.dot {
  stroke: black;
  stroke-dasharray: 0.1 4;
  stroke-linecap: round;
}
path.top {
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-linecap: round;
  animation: dash 15s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -250;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox='0 0 100 100'>
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' />
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' />
</svg>