Animation Overview

Create a div element give it class so thta it can used in the css.

CSS Animation

1.animation-name: Specifies the anme of the @keyframes that should be applied to the elemnet. 2.animation-duration: determines the legnth of times that an animation take to complete one cycle. it's defines in seconds(s) or milliseconds(ms).

3.animation-timing-function: Defines the speed curve of animation which controls how animation progressses through its duration.

Common values include
• linear
• ease
• ese-in
• ease-out
• ease-in-out

4.animation-delay: Sets a delay before the animation start allowing you to offset when an animation begins. 5.animation-iteration-count: Determines how many times an animation repeats it can specific number like 2 or a keyword infinite for an endless loop. 6.animation-direction: whether animation will run normally or reverse. (the default is normal).

common values include:
• normal: The animation plays forwards (from 0% to 100% of the keyframes) each cycle. This is the default value.
• reverse: The animation plays backwards (from 100% to 0% of the keyframes) each cycle.
• alternate: The animation plays forwards on the first cycle, then backwards on the second, and continues to alternate directions with subsequent cycles.
• alternate-reverse: The animation plays backwards on the first cycle, then forwards on the second, and continues to alternate directions.

7.animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) 8.animation-play-state: Specifies whether the animation is running or paused.

use css at-rule @keyframes animation-name and for start of the animation use keyword from{ start of the animation } and for the ned of the animation to{ anyy css property you want. }

You can find more detailed information and examples about CSS Animation on the MDN web docs

live demo: https://app.netlify.com/projects/animation-in-css/overview