SOURCE

var keybtn = document.querySelector('#key');
var water1 = document.querySelector('#water');
var water2 = document.querySelector('#water2');

water2.addEventListener("webkitAnimationEnd", function(evt) { //动画结束时事件
  this.className.baseVal = "runing";

  water1.className.baseVal = "runing";
},
false);

water1.addEventListener("webkitAnimationEnd", function(evt) { //动画结束时事件
  this.style.strokeDashoffset = 0;
},
false);

keybtn.addEventListener("click", function() {
  water1.className.baseVal = "first-run";
},
false);

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
  <polyline class="pipeline" points="10,10 10,200 200,200 200,400 400,400 400,600"
  style="fill:white;stroke:gray;stroke-width:2" />
  <polyline class="water" id="water" points="10,10 10,200 200,200" style="fill:white;stroke:blue;stroke-width:2"
  />
  <polyline class="water" id="water2" points="200,200 200,400 400,400 400,600"
  style="fill:white;stroke:blue;stroke-width:2" />
  <rect id="key" width="20" height="20" x=190 y=190 style="fill:gray;stroke-width:1;stroke:rgb(0,0,0)"
  />
  <text style="fill:black;" x=220 y=190 font-size="20" font-family="YouYuan"
  x="100" y="100" width="200" height="30">
    点击阀门
  </text>
</svg>
<div class="point"></div>

    .water {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear 1;
    }
    
    .no-water {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
    }
    
    .first-run {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear 1;
    }
    
    .runing {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: run 10s linear infinite;
    }
    
    .runwater1 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: run 10s linear infinite;
    }
    
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    
    @keyframes run {
      from {
        stroke-dasharray: 10, 5;
      }
      to {
        stroke-dasharray: 40, 5;
      }
    }
@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;
}