Configurable Properties
Learn how CSS animations work, their configurable properties, and how we can customize them in our application.
CSS animations use keyframes to define the animation cycle. At least one keyframe is required for a CSS animation to be executed. It’s more common to have two keyframes, defining the start and end state of the animation. We could also add multiple intermediate steps by defining more keyframes for our animations.
Press + to interact
CSS animations configs
Let’s take a look at how to define the keyframes for our animation. Keyframes use the @keyframes at-rule (CSS statements that instruct CSS how to behave) and contain the following properties:
<custom-indent>: A name to identify the keyframe animation.from: A starting offset of0%to: An ending offset of100%<percentage>
Access this course and 1400+ top-rated courses and projects.