CSS provides the at-rule @keyframes to do this. This means that an animation is initially defined independently of a particular element or selector. The advantage of this is that you can subsequently assign the animation to as many elements as you want.
Rather annoyingly, you currently need to add the vendor prefix again to the keyframes. In other words, you must define each animation three times:
In order to be able to uniquely identify an animation created in this manner and then assign it to an element, it must have a unique, self-defined name, e.g.
The next stage is to define the individual keyframes (animation steps). You do this either by specifying percentage values (relating to the elapsed time) or simply by using the keywords from and to. For example, if you want to slowly fade in an element, insert (in the three vendor-specific versions respectively) either:
The benefit of using the version with percentages is that you are not restricted to the start and end points, but you can incorporate as many intermediate steps as you want during which the animation can change.
You are obviously not restricted either to one property per keyframe (in the example, opacity), but you can change as many properties as you want at once in each keyframe. For instance, to magnify our element while fading it in, insert
The exercise files can be foundfor the following statement in the support material under
The selector #circle already contains the properties top:0 and position:relative as a requirement for doing this.
We are now going to define our keyframes:
This will animate the top property. The element is located at the start of the animation at 0rem from the top, and at 20rem at the end (100%).
But if you look at the HTML file in the browser, you will see that precious little has happened yet. This is because we have still not assigned the animation to any element.