Css

Mesmerizing Eyelids Animation Using SVG and CSS

Css

Mesmerizing Eyelids Animation Using SVG and CSS

Hey designers and developers! Today, I'm excited to share a delightful SVG/CSS animation that will surely captivate your audience – the Eyelids Animation! 🌟

In this tutorial, we'll create a pair of charming eyelids that gently open and close, giving your illustrations, characters, or website mascots a touch of life and personality.

Let's get started with the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eyelids SVG/CSS Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="eyelids">
        <svg class="eye" viewBox="0 0 100 100">
            <!-- Add your eye elements here (e.g., iris, pupil, etc.) -->
        </svg>
        <div class="eyelid-top"></div>
        <div class="eyelid-bottom"></div>
    </div>
</body>
</html>

Now, let's create the magic with some CSS animation:

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.eyelids {
    position: relative;
    width: 120px;
    height: 120px;
}

.eyelid-top,
.eyelid-bottom {
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: #fff;
    border-radius: 50%;
}

.eyelid-top {
    top: 0;
    animation: blink-top 5s infinite alternate ease-in-out;
}

.eyelid-bottom {
    bottom: 0;
    animation: blink-bottom 5s infinite alternate ease-in-out;
}

@keyframes blink-top {
    0%, 100% {
        top: 0;
    }
    50% {
        top: 50%;
    }
}

@keyframes blink-bottom {
    0%, 100% {
        bottom: 0;
    }
    50% {
        bottom: 50%;
    }
}

In this example, we've created a simple structure with a pair of eyelids (.eyelid-top and .eyelid-bottom) that use CSS keyframe animations (blink-top and blink-bottom) to create the opening and closing effect.

Adjust the SVG inside the .eye element to design your own eye. You can add an iris, pupil, or any other details you want!

Feel free to experiment with different animation speeds, easing functions, and eye designs to match your project's aesthetics.

Remember to include the latest version of the SVG and CSS files, and you're all set to mesmerize your visitors with these enchanting eyelids!

Happy animating! 😊🎨

Recent Posts

Categories

Tag Clouds