Configurable Properties
Explore how to create CSS keyframe animations with customizable properties such as duration, delay, iteration count, timing function, fill mode, direction, and play state. Understand how to name animations, define keyframes, and write animation syntax including shorthand to build smooth and controllable animations for Angular applications.
We'll cover the following...
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.
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>