In this video i will talk about Animations in CSS

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub-properties
animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence (cool examples).

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.

For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.