Animation ideas for web pages using HTML & CSS

Straight forward and simple web pages are good but not the best. The animation is the thing that brings life to a static page and makes it more eye-catchy.

Here are a few ideas of animation for your web pages using the frontend languages like HTML & CSS. 

1. Rotating a Card: The first one is rotating a card. The card has two things front side and the backside when we hover our mouse to the card it will rotate 180 degrees and it will show the backside only.

Explanation: Here the first whole body is styled the image. The button is styled according to your need and creativity. The main thing here is the rotation at first the backside is hidden or rotated 180 degrees and when we hover to the card the front side is rotating -180 degrees and the backside is coming in the front.

Below is the example that illustrates the Rotating card animation.

Example:

Output:

2. Text Moving Up & Down: In this animation, the text will go up on hovering the mouse to it, and in the case of mobile on click, the text will go up.

Explanation: At first, the down texts are being covered using the overflow is hidden and bottom negative value. And when we are hovering into the card the front text is going up using translateY negative values and down text is shown by making the bottom value as zero. Linear-gradient is used to read the text clearly. Transition plays a big part as it makes things going smoothly. The rest of the code is just for styling and for making things good.

Below is the example that illustrates the Text Moving Up & Down animation.

Example:

Output:

3. Text Coming up on Hovering: In this animation text coming up on hovering to the image and the image is zoomed.

Explanation: The first is to make the text disappear which is done by making opacity zero. Now on hovering the image the image will be zoomed and the overflow hidden property makes sure that the outer part of the image when it is zoomed doesn't go outside of the certain height and width. And on hovering making the opacity of the image text one makes it visible. Transition property just made things smoother.

Below is the example that illustrates the Text Coming up on Hovering animation.

Example:

Output: