SIMPLE CSS ANIMTATION

*CSS ANIMATIONS : *

CSS Animation is which is helps to change one style to another style. We can use animation without using javascript. If we want to use animation on CSS we have to use @keyframes.

There have some advantages to using CSS animations:
This is easy to use and you can create animation without using javascript.
This animation’s performances are so smooth for their rendering engine use frame0skipping and some other techniques.
Letting the browser control the animation sequence lets the browser optimize performance and efficiency

@keyframes helps to use animation on CSS. @keyframes take a name and curly bracket. On curly bracket, you have to use from and to or 0% and 100%, percentage to changing styles. 0% means the beginning of the animations and 100% means the end of the animation and the from means from where animation start and to means where the animation will end.

*Example of defining:
*—from to—

–percentage—

These two images are showing that how to use from to and percentage in keyframes. Now we will see an example of animation.

Example of animation :
First, you have write an HTML code to make a structure for your animations. Like I had written some HTML code in below.

After writing some HTML code and we have to add some styles for positions items and looking beautiful.
Styles

After adding styles on elements we need to take which element you want to make animation. On that element’s CSS you have to write the animation property name on that CSS element’s CSS. you can add delay, how many time loops and etc more options.

After defining the name on that CSS you have to @keyframes Name { } in CSS. inside the curly bracket, you will write code which animation you want to make.