DEMO: CODEPEN
Its just plain svg and css keyframe animation.
I added separate paths for each of the lines so there are separate animations for all the paths.
For timing and delay look at the animation property’s of the different paths.
Like animation: Drawpath 1s linear 2s forwards;
The first number is the duration of the animation so 1 second.
2s is the delay. So there is 2 seconds of delay.
Forwards is just that it keeps the end property, we don’t want our line to disappear when the animation is done.
.key-anim1 {
-webkit-animation: Drawpath 1s linear forwards;
animation: Drawpath 1s linear forwards;
stroke-dasharray: 0, 100;
}
.key-anim2 {
-webkit-animation: Drawpath 1s linear 1s forwards;
animation: Drawpath 1s linear 1s forwards;
stroke-dasharray: 0, 100;
}
.key-anim3 {
-webkit-animation: Drawpath 1s linear 2s forwards;
animation: Drawpath 1s linear 2s forwards;
stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
from {
stroke-dasharray: 0, 100;
}
to {
stroke-dasharray: 100, 100;
}
}
@keyframes Drawpath {
from {
stroke-dasharray: 0, 100;
}
to {
stroke-dasharray: 100, 100;
}
}<svg class="test" viewbox="0 0 400 200">
<path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
<path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
<path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
<circle r="10" cy="50" cx="50" fill="#f33" />
<circle r="10" cy="100" cx="50" fill="#f33" />
<circle r="10" cy="150" cx="50" fill="#f33" />
<circle r="10" cy="50" cx="100" fill="#f33" />
<circle r="10" cy="100" cx="100" fill="#f33" />
<circle r="10" cy="150" cx="100" fill="#f33" />
<circle r="10" cy="50" cx="150" fill="#f33" />
<circle r="10" cy="100" cx="150" fill="#f33" />
<circle r="10" cy="150" cx="150" fill="#f33" />
</svg>