Animating a point after a point from an image using CSS3 or jQuery

Question

I want to animate a point after a point from the image below, but my problem is with the curved part of the image (bottom of the image).

At the beginning, all points must be hidden, and then one by one each point must be animated.

I have the code below:

<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

, SVG path, . , . ( ) ( ) , . , , .

. , , . , .

, path, stroke-dasharray stroke-dashoffset .

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>

Answer 2

:

HTML

<div id="dots">
    <img src="http://i.stack.imgur.com/oxUh8.png">
</div>

JQuery

$("#dots").css("height", "514px");

CSS

#dots{
    overflow: hidden;
    height: 10px;
    transition: all 3s cubic-bezier(.5, 1, 0, .5);
}

: https://jsfiddle.net/brezkryx/