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
2
3
.dashed-line  {
stroke-dasharray: 5;
}
1
<line class="dashed-line" x1="144" y1="84" x2="296" y2="84"/>
  1. To make the dashes move, add keyframes to your css. Again feel free to play with the value 1000
1
2
3
4
5
@keyframes dash-animation {
to {
stroke-dashoffset: 1000;
}
}

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

1
2
3
4
5
@keyframes dash-animation {
to {
stroke-dashoffset: -1000;
}
}

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

1
2
3
4
5
6
7
.dash-move {
animation: dash-animation 20s infinite linear;
}

.dash-move-opposite {
animation: dash-animation-opposite 20s infinite linear;
}

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.
1
<line class="dashed-line dash-move" x1="144" y1="84" x2="296" y2="84"/>

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

1
<line class="dashed-line dash-move-opposite" x1="144" y1="84" x2="296" y2="84"/>

Good Luck !