Using the @keyframes CSS rule you can specify the steps in a CSS animation sequence by defining styles and how the element should render at a given time during the sequence.
This is extremely powerful and allows you to define your own animations and make for some really cool effects.
Let’s jump right in!
A keyframe definition needs a few things:
1) A Name - to describe the animation, example “bounceOut”
2) Stages of the animation - specified as from (0%) and to (100%) or in percentages at the stages
of the animation. You can get very granular and describe and various percentages
what the CSS properties should be for the animation. For example:
3) CSS properties - the properties that you want the animation to take on at the defined stage
Let’s make a simple custom animation using keyframes: