Open In App

Animation ideas for web pages using HTML & CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        body {
            color: hsl(209, 61%, 16%);
            background: #fff;
            ;
        }
  
        img {
            width: 100%;
            display: block;
        }
  
        .btn {
            background: white;
            color: rgb(64, 119, 64);
            padding: 0.375rem 0.75rem;
            letter-spacing: 3px;
            display: inline-block;
            border: 2px solid transparent;
            border-radius: .5rem;
            cursor: pointer;
        }
  
        .blog {
            background: hsl(210, 36%, 96%);
        }
  
        .card {
            height: 500px;
            position: relative;
            width: 500px;
            margin-left: 30rem;
        }
  
        .card-side {
            -webkit-transition: all 2s linear;
            transition: all 2s linear;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
            visibility: visible;
        }
  
        .card-back {
            background: rgb(55, 116, 75);
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            display: grid;
            place-items: center;
        }
  
        .card:hover .card-front {
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }
  
        .card:hover .card-back {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
        }
  
        .card-info {
            padding: 1rem 1.5rem;
        }
  
        .card-front img {
            height: 13rem;
            -o-object-fit: cover;
            object-fit: cover;
            height: 500px;
        }
    </style>
</head>
  
<body>
    <div class="section blog">
        <div class="card">
  
            <!-- front of the card -->
            <div class="card-side card-front">
                <img src=
                    alt="" />
            </div>
  
            <!-- card back  -->
            <div class="card-side card-back">
                <button class="btn">
                    Read More
                </button>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Rotating Card

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:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .services-container {
            max-width: 600px;
            margin: 0 auto;
            color: #e0e2db;
            background: url(
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
  
        .service-item {
            overflow: hidden;
            position: relative;
            padding: 80px;
        }
  
        .service-item-black {
            background: linear-gradient(
                rgba(0, 0, 0, 0.7), 
                rgba(0, 0, 0, 0.7)
            );
        }
  
        .front-text {
            text-align: center;
            transition: transform 2s;
        }
  
        .back-text {
            position: absolute;
            bottom: -15em;
            width: 75%;
            margin: 0 auto;
            height: 100%;
            transition: bottom 2s;
            padding: 15px 0;
        }
  
        .back-text h1 {
            margin-bottom: 20px;
        }
  
        .back-text button {
            margin-top: 20px;
            padding: 10px 20px;
            background: transparent;
            border: 2px solid #30804b;
            font-size: 20px;
            color: #30804b;
        }
  
        .back-text button:hover {
            background-color: #30804b;
            color: #191716;
        }
  
        .service-item:hover .front-text {
            transform: translateY(-200px);
        }
  
        .service-item:hover .back-text {
            bottom: 0;
        }
    </style>
</head>
  
<body>
    <div class="services-container">
        <article class="service-item 
       service-item-black">
            <div class="front-text">
                <h1>Geeks For Geeks</h1>
            </div>
  
            <div class="back-text">
                <h1>Geeks For Geeks</h1>
  
                <p>
                    A Computer Science portal for geeks.
                    A Computer Science portal for geeks.
                    A Computer Science portal for geeks.
                </p>
  
                <button type="button">Read More</button>
            </div>
        </article>
    </div>
</body>
  
</html>


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:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        #projects {
            padding: 20px 0 80px 0;
            background-color: #e0e2db;
        }
  
        .projects-container {
            max-width: 40vw;
            margin: 0 auto;
        }
  
        .projects-item {
            position: relative;
            background: linear-gradient(
                rgba(0, 0, 0, 0.9), 
                rgba(0, 0, 0, 0.9)
            );
            color: #e0e2db;
            overflow: hidden;
            margin: 10px 0;
        }
  
        #projects img {
            width: 100%;
            min-height: 100%;
            transition: transform 2s;
            display: block;
        }
  
        .img-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            opacity: 0;
            transition: opacity 4s;
        }
  
        .img-text h1 {
            font-size: 40px;
            margin-bottom: 10px;
        }
  
        .img-text h6 {
            font-size: 20px;
        }
  
        .projects-item:hover img {
            opacity: 0.4;
            transform: scale(1.3);
        }
  
        .projects-item:hover .img-text {
            opacity: 1;
        }
    </style>
</head>
  
<body>
  
    <div id="projects">
        <div class="projects-container">
            <article class="projects-item">
                <img alt="image"
                    src=
                <div class="img-text">
                    <h1>GeeksforGeeks</h1>
  
                    <h6>
                        It is a computer Science
                        portal for geeks.
                    </h6>
                </div>
            </article>
        </div>
    </div>
  
</body>
  
</html>


Output:



Last Updated : 08 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads