Transcript
[00:00] Okay, we’ve got a basic HTML page here. I’m going to set up this div with a class of circle. Go ahead and style that guy. We’ll say width 200, height 200, and a border radius. I’ll just say 100%. Save that, and that didn’t reload. Oh, you know what? Let’s give it a background color. There it is. I’m just going to get that centered. Okay, there we go. So now we’ve got the circle, and if we want to animate it, we could go download a whole bunch of libraries and whatever. We’re not going to do that. We’re going to look at the web animations API.
[00:44] So I’m going to set up a little JavaScript here. I’m going to select our circle element, and then I’m just going to add animate. I’m going to tack that on. I’m just going to chain it right there. Now, animate is going to take in a couple things. The first thing is an array of keyframes, and the second thing is an object that represents our, I think they call it the effect timing object. So in our keyframes, each one is an object, and then we use CSS, or we use CSS type selectors or descriptors to animate this thing. So I’m going to say it has a key of transform. I’m going to make that equal to translate Y. So we’ll be animating on the Y axis, and this is our starting point, zero. I’m going to add another one. Again, we’re still inside that array, and I’m going to say 450 pixels.
[01:38] Now when I save that, nothing’s going to happen because we haven’t set up our timing object. So our timing object can take a few things. One is duration. So this is how long is it going to take to run the animation? As soon as I add that, we can see it is moving from a position of zero to 450 pixels, but I only did it once. I wanted to do it a bunch of times. So we can say iterations, and let’s say I just put in three here. Now it’s going to do that from top to bottom three times, and then it’s going to end. We can replace that with infinity, infinity, and it’ll just do it endlessly now.
[02:19] So what I want to do here is have it kind of go down and come back up, not just this going down action. So we can set a direction, and in my case, I want something called alternate. And what that’s going to do is it’s going to play the animation forward, and then it’s going to play the animation back, and when it gets to the beginning, it’ll play it forward again. One more thing we can do here is add a bit of easing. So you can use curves or whatever you want, or you can just use kind of standard built-in CSS stuff like ease in, out. Now it’ll get just a little bit smoother. So that’s pretty cool.
[02:59] So I chose to do translate Y here. I could have done, here, let’s just play with this for a second. So on the transform, I’ll say margin top. I wouldn’t suggest doing this, but just to show you, we can play with different CSS properties. So now I’m achieving the exact same thing with margin top. We could do something like background color. Start off at red. And go to blue. And we’ll see each of those animating. So we can see the margin is animating, and we can see that the background color is animating. I’ll see you next time.
Stop wrestling with heavy animation libraries by building smooth, performant JavaScript animations directly in the browser using the native Web Animations API. This tutorial shows you how to animate DOM elements with CSS properties like transforms and colors without downloading external tools, giving you lightweight frontend development solutions for modern web design.
<html><head> <style> body { background-color: #222; display: flex; justify-content: center; }
.circle { border-radius: 100%; height: 200px; width: 200px; background-color: #fff; } </style></head><body> <div class="circle"></div>
<script> document.querySelector('.circle').animate( [ { marginTop: 0, backgroundColor: 'blue' }, { marginTop: '450px', backgroundColor: 'red' } ], { duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease-in-out' } ); </script></body></html>