css3 点沿着线走的动画

Question

我想实现的动画如下图所示，点沿着线从右往左走，用CSS3动画可以实现吗？
或者说说思路，demo 都可以，谢谢了。

Answer 1

线段长度固定的话,算好距离用@keyframes分段控制一下横向和纵向移动就可以了

随手写了一个简单的

<style>
@keyframes move {
  0% {
    left: 0;
    top: 20px;
  }
  20%, 80% {
    top: 20px;
  }
  30%, 70% {
    top: 0;
  }
  100% {
    left: 300px;
    top: 20px;
  }
}
.box {
  position: relative;
  width: 300px;
  height: 20px;
}
.point {
  width: 5px;
  height: 5px;
  background-color: #f00;
  position: absolute;
  border-radius: 50%;
  animation: move 6s infinite linear;
}
</style>
<div class="box">    
  <div class="point"></div>
</div>

Answer 2

css3可以实现，但是css3实现的是沿着边框border的动画，实现起来很复杂；我建议你用svg的路径动画，这个实现简单

Answer 3

用svg比较简单，我写过几个关于svg的文章，可以参考一下

Answer 4

用css3, svg, canvas都可以

css3，使用animation，控制animation-duration和animation-delay，来显示每一段线的的动画

svg，就简单很多，用ps导出一个svg文件，然后使用animation控制stroke-dashoffset, stroke-dasharray

canvas，就一段段path按顺序绘制吧，可能复杂点