0:00 Let's start by defining a CSS keyframe animation. We'll do that in the base layer, so @keyframes. We'll call the animation slide. It will go from, or the zero percent keyframe, its original position, so transform translateX zero. It will go to transform translateX 20 pixels.

0:23 Now, in our stripes class, we can define an animation. We will consume this slide keyframe animation. We want the duration to be one second. It should repeat infinitely. The easing should be linear. Let's save that.

0:37 Whoops. There's a problem. You can see that the whole element is animating. That's not what we want. We want the element to remain where it is and then the stripes inside of it slide to the right infinitely.

0:52 We need to update this code here and use a pseudo-element instead of the element itself. We will target stripes before, but that's going to break things. Let's add a few properties. First, we need the content property for the pseudo-element to show at all. Then we need to give it some dimensions. Let's create a stripes selector as well.

1:11 This will have a position of relative, which means that now our pseudo-element can have a position of absolute. We'll anchor it to top zero and right zero. I'll explain why in a second. We'll give it a height of 100 percent and a width of 100 percent. Even if that one's not correct, we're going to start with this. Hopefully, it illustrates why it's not correct.

1:35 Nice. We now have the stripes animating, but the actual element is not moving, which is what we want. Obviously, we don't want the stripes to stick out of here. There's also a problem on the left.

1:48 Let's start by fixing the overflow problem here. On the actual element here, I can add overflow hidden. That'll take care of this. As you can see, as the stripes travel to the right, they reveal this little gap here. This is why I said that the width 100 percent was not correct.

2:05 We actually need to increase that width a little bit. We're anchoring the positioning to the right. If we add some width, it will add it to the left. We're traveling by 20 pixels, so we can update the width to be...Let's use calc. It's going to be 100 percent plus 20 pixels. That should fix it perfectly. Look at that. This is looking great.

2:29 Let me remove the overflow hidden for a second to show you, so you can see that the width of the pseudo-element is 100 percent plus these 20 pixels. When it translates, it moves to the right by 20 pixels, which means it starts with an extra 20 and then stops right as it hits the edge. It's perfect. If you managed to get that one, well done.