Creative and Unique CSS Animation Example
We all know that grabbing your audience’s attention is critical to any business’s success.
We’re all about pushing the boundaries of web design and user experience.
One cool way to do this is to use Pure CSS animations. Imagine adding a touch of magic to your website without slowing it down. There is no need for complex JavaScript—just pure CSS!
We will dive into a fun example with this article.
Imagine a bouncing ball animation.
It’s a simple yet effective way to add personality to your site.
We’ll use CSS keyframes and transforms to make the ball bounce around and cast a realistic shadow.
Why Pure CSS?
- Speed: It’s lightning-fast, ensuring a smooth user experience.
- Simplicity: Less code, less headache.
- Compatibility: Works across most browsers.
- Engagement: Captures attention and makes your content more memorable.
Let’s get started and create something awesome together!
Step-by-Step Guide to Creating the Animation
1. Setting Up the HTML Structure
First, we’ll need a simple HTML structure with a single div element representing the ball.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bouncing Ball Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="bouncing-ball"></div>
</body>
</html>2. Defining the Base Styles in CSS
Create a styles.css file and start by resetting the default margins and padding and setting the body to occupy the full viewport height.
/* styles.css */
/* Reset and body styling */
body {
margin: 0;
padding: 0;
position: relative;
height: 100vh;
overflow: hidden;
background-color: #f0f0f0; /* Light background to contrast the ball */
}3. Styling the Bouncing Ball
Next, we’ll style the .bouncing-ball class to define the ball’s appearance and initial position.
Positioning: The ball starts at the top center of the viewport.
Appearance: A radial gradient gives it a spherical look with a vibrant color scheme.
Animation: The bounce animation is applied, which we’ll define later.
Shadow: Adds depth to the ball.
/* Base styles for the ball */
.bouncing-ball {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: radial-gradient(circle at 30% 30%, #ff6b6b, #c44536 70%);
border-radius: 50%;
animation: bounce 8s ease-out infinite;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
opacity: 0;
}4. Adding the Shadow Effect
We’ll use the ::after pseudo-element to create a shadow that follows the ball’s movement.
/* Shadow that follows the ball */
.bouncing-ball::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 60px;
height: 20px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2), transparent);
transform: translateX(-50%) scale(1);
border-radius: 50%;
filter: blur(2px);
animation: shadow 8s ease-out infinite;
opacity: 0;
}5. Defining the Keyframes for Animation
Now, we’ll define the @keyframes for both the bounce and shadow animations.
Bounce Animation: The ball moves vertically from the top to the bottom of the viewport and horizontally across different positions (left: 20%, 60%, 40%, 80%).
Shadow Animation: The shadow scales and changes opacity in sync with the ball to create a realistic effect.
Opacity Changes: At the end of each cycle, the ball and shadow fade out before reappearing at the top in a new position.
/* Keyframes for the bouncing animation */
@keyframes bounce {
/* First cycle (0% - 25%) */
0% {
top: 0%;
left: 20%;
opacity: 1;
}
12.5% {
top: calc(100% - 50px);
opacity: 1;
}
25% {
opacity: 0;
}
/* Second cycle (25% - 50%) */
25.01% {
top: 0%;
left: 60%;
opacity: 1;
}
37.5% {
top: calc(100% - 50px);
opacity: 1;
}
50% {
opacity: 0;
}
/* Third cycle (50% - 75%) */
50.01% {
top: 0%;
left: 40%;
opacity: 1;
}
62.5% {
top: calc(100% - 50px);
opacity: 1;
}
75% {
opacity: 0;
}
/* Fourth cycle (75% - 100%) */
75.01% {
top: 0%;
left: 80%;
opacity: 1;
}
87.5% {
top: calc(100% - 50px);
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Keyframes for the shadow animation */
@keyframes shadow {
/* First cycle (0% - 25%) */
0%,
12.5% {
transform: translateX(-50%) scale(1);
opacity: 0.5;
}
25% {
opacity: 0;
}
/* Second cycle (25% - 50%) */
25.01%,
37.5% {
transform: translateX(-50%) scale(1);
opacity: 0.5;
}
50% {
opacity: 0;
}
/* Third cycle (50% - 75%) */
50.01%,
62.5% {
transform: translateX(-50%) scale(1);
opacity: 0.5;
}
75% {
opacity: 0;
}
/* Fourth cycle (75% - 100%) */
75.01%,
87.5% {
transform: translateX(-50%) scale(1);
opacity: 0.5;
}
100% {
opacity: 0;
}
}6. Final Touches
To ensure the animation runs smoothly, make sure to link the styles.css file correctly and test the animation across different browsers for compatibility.
Now that we’ve created the bouncing ball animation, let’s explore how animation can be utilized on your website.
Grab attention: We can highlight special offers or new services with some eye-catching animations.
Tell better stories: Animations can make our stories more captivating and accessible.
Showcase our skills: We can use animations to show off our web design and development expertise in our portfolio and blog posts.
Improve navigation: Subtle animations can guide users around the site, making it easier to use.
Provide feedback: We can use animations to let users know when their actions have been processed, like when they submit a form or click a button.
Strengthen our brand: To make our website more memorable, we’ll use animations that match our brand’s style and colours.
We believe that thoughtfully using animations can create a more engaging and user-friendly website that truly reflects your brand.
So, to wrap things up, at HypeX Digital Marketing Agency, we’re all about using the latest tech to create amazing online experiences.
This bouncing ball animation, built entirely with CSS, is a perfect example of how creativity and technical skill can be combined.
We’re excited to explore more ways to use CSS animations to create dynamic and interactive websites.
By staying ahead of the curve, we can continue to deliver top-notch digital experiences for our clients.
So, if you need help with a new website or an existing one, you can always contact us!
Important: The code snippets provided are a starting point. Feel free to customise the animation to suit specific needs or branding guidelines better.
See the code in action at CodePen
