With a continuation of the last blog post this time I’ll quickly show you how to do the repeating animations so that you can show off and flex your skills on a website.

This isn’t necessary of a full tutorial. It’s best I show you a codepen that has the full source code.

See the Pen
Flat Devices
by Maximilian Alexander (@mbalex9)
on CodePen.

## Run Through

1. To make a dashed line add a stroke-dasharray: 5; to your css. Feel free to play with the number:
1. To make the dashes move, add keyframes to your css. Again feel free to play with the value 1000

To make them move in the opposite direction, make sure the number is negative like so. I’ve put -1000.

Now add 2 css classes, one for dashed animations to move to the left, the other one to move to right:

You’ll want to make sure you add the infinite and linear values to make sure it constantly repeats. Then add time to how often you want the keyframes to go for. In this example I’ve done 20s for 20 seconds.

1. Now add the dash-move and dash-move-opposite to the lines.

This one has dash-move-opposite. The lines will move in the opposite direction.

Good Luck !