Rate this post

In the world of web design, animations can bring a delightful flair to your projects. Today, we’ll explore how to create a whimsical bird animation using just HTML and CSS. This example features a simple yet engaging bird animation, showcasing various CSS techniques such as keyframe animations, transformations, and gradients.

Table of Contents

The HTML Structure

Our HTML is straightforward. It consists of a container with several div elements representing different parts of the bird: the body, mouth, beak, feather, tail, and legs. Each part will be styled and animated with CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bird Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="body"></div>
        <div class="mouth"></div>
        <div class="beak"></div>
        <div class="feather"></div>
        <div class="tail"></div>
        <div class="leg"></div>
    </div>
</body>
</html>

The CSS Magic

Now, let’s dive into the CSS that brings this bird to life. The styles are crafted to define the bird’s appearance and animate its different parts.

Basic Styles

First, we set some global styles and define color variables for easy customization:

* {
    margin: 0;
    padding: 0;
}

:root {
    --body: #ff533e;
    --mouth: #000000;
    --feather: #939393;
    --beak-top: #e9581a;
    --beak-down: #aa4c21;
    --leg: #00adef;
    --body-color: #e33df7;
}

body {
    background: var(--body-color);
    font-family: sans-serif;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

Bird Parts Styling

Each part of the bird is styled to create a cohesive look:

Body: The main part of the bird, given a rounded shape and a slight rotation for a natural appearance.

.body {
    top: 26px;
    left: 50px;
    height: 180px;
    width: 200px;
    transform: rotate(-17deg);
    background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--body) 20%);
    z-index: 2;
}

Mouth: Positioned with animation to simulate movement.

.mouth {
    background: var(--mouth);
    top: 20px;
    left: -175px;
    width: 100px;
    height: 100px;
    transform: rotate(-17deg);
    z-index: 5;
    animation: animate-mouth 1.5s forwards;
    animation-delay: 2s;
}

@keyframes animate-mouth {
    100% {
        left: 175px;
    }
}

Feather: Animated to give a fluttering effect.

.feather {
    z-index: 4;
    left: 44px;
    top: -206px;
    width: 150px;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--feather) 50%);
    transform: rotate(-17deg);
    animation: animate-feather 1.5s forwards;
    animation-delay: 2s;
}

@keyframes animate-feather {
    100% {
        top: -6px;
    }
}

Tail: Adds a bit of character with a rotating animation.

.tail {
    width: 150px;
    height: 60px;
    background-color: var(--mouth);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    top: 92px;
    left: 324px;
    transform: rotate(-17deg);
    z-index: 3;
    animation: animate-tail 1.5s forwards;
    animation-delay: 2s;
}

@keyframes animate-tail {
    100% {
        left: -24px;
    }
}

Beak: Rotates into position for a finishing touch.

.beak {
    height: 100px;
    width: 100px;
    background: linear-gradient(to bottom, var(--beak-top) 0%, var(--beak-top) 15%, transparent 15%);
    left: 224px;
    top: 240px;
    z-index: -1;
    transform: rotate(-17deg);
    animation: animate-beak 1.5s forwards;
    animation-delay: 2s;
}

@keyframes animate-beak {
    100% {
        top: 40px;
    }
}

Legs: Animated to move up, completing the bird’s motion.

.leg {
    background: var(--leg);
    height: 50px;
    width: 10px;
    border-radius: 10px;
    top: 515px;
    left: 125px;
    transform: rotate(-15deg);
    z-index: 1;
    animation: animate-leg 1.5s forwards;
    animation-delay: 2s;
}

@keyframes animate-leg {
    100% {
        top: 215px;
    }
}

.leg::before {
    bottom: -8px;
    content: "";
    width: 40px;
    height: 90px;
    background: var(--leg);
    border-radius: 10px;
    transform: rotate(15deg);
    z-index: -1;
}

.leg::after {
    top: -8px;
    content: "";
    width: 30px;
    height: 9px;
    background: var(--leg);
    border-radius: 10px;
    transform: rotate(-15deg);
    z-index: -1;
}

Putting It All Together

By combining these CSS animations and styles, we create a visually appealing and interactive bird animation. The key to making animations effective is to use clear, incremental steps and make sure that each animated part smoothly transitions between states.

Feel free to tweak the colors, dimensions, and animations to fit your project’s needs. This basic example serves as a foundation for more complex and intricate animations, proving that with just HTML and CSS, you can create engaging and dynamic web designs. Happy coding!

keep learning and build attractive animations with us!

0 0 votes

Course Rating