Welcome to my CSS page. Here I will attempt to explain the basics of css keyframe animations

Bounce Up

Key Frames are similar to frames in a movie. Each frame does an animation based on an interval and timing. For instance the first animation takes 1 second to execute and has three frames. The bounce up animation is given the attribute of translate Y at negative 30px and then once the animation finishes it goes back to the origin point (0px, 0px).

Bounce Down

The same concept applies for bounce down, except it sets translate Y to positive 30 because we are now going downwards on the page.

Bounce All Around

Same concept as before but utilizing the x axis as well.

Rotate

Here we utilize the rotate element and degrees.

Sliding Divs

Here is an example of a simple sliding animation that requires basic understanding of keyframes but yet creates a very modern compotent in web development.

Sliding Divs

Here is an example of a simple sliding animation that requires basic understanding of keyframes but yet creates a very modern compotent in web development.

Sliding Divs

Here is an example of a simple sliding animation that requires basic understanding of keyframes but yet creates a very modern compotent in web development.