Animation ideas for web pages using HTML & CSS - GeeksforGeeks

08 Jan, 2021
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="https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png"                    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(https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png);            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="https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png">                <div class="img-text">                    <h1>GeeksforGeeks</h1>                      <h6>                        It is a computer Science                        portal for geeks.                    </h6>                </div>            </article>        </div>    </div>  </body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property