Use TypeStyle keyframes to create CSS animations
We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes function to create an animation. We also discuss a few other CSS properties in the animation namespace.
[00:00] Here, we have a simple React application with the root div being styled by TypeStyle. For example, we can use it to bump up the font size. For doing CSS animations, TypeStyle provides a keyframes function that you can import from the main module.
[00:15] The keyframes function takes a single object as an argument. Each key in this object is a time point, and each value is a CSS style. As an example, we can go ahead and add zero percent time point. We will style the color to be black.
[00:32] Then at 50 percent, we will go ahead and change the style with the color to be blue. The keyframes function returns a generated CSS animation name, similar to how the style function returns a generated CSS class name.
[00:57] We can go ahead and use this generated animation name as a value for the animation name property within our style object. CSS keyframe animations are controlled using additional CSS properties in the animation namespace.
[01:13] For example, we can set the animation duration using the animation duration CSS property. With a value of one s, the animation time points are scaled to one second. Now, when we go ahead and run the application, you will see the animation change the color from black to blue, and then back to black over one second.
[01:37] As an example of another animation CSS property, we can make the animation play in a continuous loop using the animation duration count CSS property, which will we set to infinite. Now, when we run the application, you get a continuous, smooth infinite animation between black and blue.
[01:57] Similar to how the style function simply takes a style object, and returns a generated CSS class name, the keyframes function takes CSS keyframes, and returns a generated CSS animation name. If you plan to use the keyframes only once, you can use the keyframes function in-line as well.
[02:19] For example, I can take this keyframes function call and simply move it to the animation name value. As another example, let's go ahead and create a fade-in transition. We will delete all of our current animation code. We will plan for a nice fade-in over a duration of one second.
[02:40] We will generate an animation name using the keyframes function. We will go from an opacity of zero to an opacity of one. Now, when we run the application, you will see a nice fade-in effect.