Javascript 使用CSS3或jQuery从图像中一点一点地设置动画

我想从下图一点一点地设置动画，但我的问题是图像的弯曲部分（图像的底部）

在开始时，所有点都应该隐藏，然后每个点都应该在视图中设置动画

我有以下代码：

<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;
}

#点1{
-moz过渡：高度1s线性；
-o型过渡：高度1s线性；
-webkit过渡：高度1s线性；
过渡：高度1s线性；
位置：绝对位置；
左：50%；
z指数：1；
保证金：0-1px；
宽度：3倍；
身高：0；
背景：url（image/pic.png）0 0无重复；
}

尝试以下操作：

HTML

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

CSS

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

---

请参阅：

您可以使用两个SVG

path

元素实现此效果，如下面的代码片段所示。创建所需的两条曲线形式的路径。一条路径（位于底部）具有笔划的点模式（黑色），另一条复制路径位于顶部。设置复制路径笔划时，对于路径的一个全长，笔划的颜色为白色，对于另一个长度，笔划的颜色为透明

将在复制路径上添加动画以设置笔划偏移的动画。设置偏移动画时，笔划的白色部分慢慢移出视图，透明部分开始进入视图。当白色部分开始消失在视野之外时，它下面的黑点开始显露出来

一开始理解起来有点复杂，但一旦你熟悉了，它就会看起来很简单

svg{
高度：400px；
}
路径{
填充：无；
}
路径点{
笔画：黑色；
笔划数组：0.14；
笔划线头：圆形；
}
path.top{
笔画：白色；
笔画宽度：2；
行程：250；
笔划线头：圆形；
动画：短跑15秒直线前进；
}
@关键帧破折号{
从{
笔划偏移：0；
}
到{
行程偏移：-250；
}
}

图像无法满足您的需求。您需要使用SVG。@Harry，谢谢您的帮助，您能给我看一下示例代码吗？实际上，这不会逐点设置动画，因为曲线的某些部分几乎是一条直线。它们将一次性出现（如果持续时间增加，则可以看到）。OP是否同意这一点是另一回事：）@spencerlarry，谢谢你的帮助，但我的问题是图像的弯曲部分（图像的底部），在这个示例中，图像的底部加载速度更快，如何解决这个问题？

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