Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create gooey balls animation using HTML & CSS?
Gooey balls animation is a visually appealing effect created using HTML and CSS that makes circular elements appear smooth, flowing, and squishy like balls made of goo. This animation style uses CSS keyframes to specify property values at different points in the animation timeline, creating engaging visual effects for websites.
Syntax
@keyframes animation-name {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.element {
animation: animation-name duration timing-function iteration-count;
}
Step-by-Step Implementation
Step 1: Create HTML Structure
First, create the basic HTML structure with a container and ball element.
Step 2: Add CSS Styling
Style the ball element with width, height, and 50% border-radius to make it circular.
Step 3: Create Keyframes
Define keyframes to specify CSS property values at different animation stages.
Step 4: Apply Animation
Connect the keyframes to the element using the animation property.
Example 1: Gooey Ball with Color Change
This example creates a ball that scales up and down while changing colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.gooey-ball {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #40e0d0;
animation: gooey 2s infinite ease-in-out;
}
@keyframes gooey {
0% {
transform: scale(1);
background-color: #40e0d0;
}
50% {
transform: scale(1.5);
background-color: #ff00ff;
}
100% {
transform: scale(1);
background-color: #40e0d0;
}
}
</style>
</head>
<body>
<h3>Gooey Ball Animation with Background Color Change</h3>
<div class="gooey-ball">
<div class="ball"></div>
</div>
</body>
</html>
A circular ball appears that continuously scales from normal size to 1.5x larger while changing from turquoise to magenta and back, creating a pulsing gooey effect.
Example 2: Jumping Gooey Ball
This example combines scaling and vertical movement for a more dynamic effect
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.gooey-ball {
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, yellow, green, red);
animation: gooey 2s infinite ease-in-out, jump 2s infinite ease-in-out;
}
@keyframes gooey {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body>
<h3>Gooey Ball Animation with Jumping Effect</h3>
<div class="gooey-ball">
<div class="ball"></div>
</div>
</body>
</html>
A colorful ball with a radial gradient bounces up and down while simultaneously scaling larger and smaller, creating a combined gooey jumping effect.
Key Animation Properties
| Property | Description |
|---|---|
transform: scale() |
Changes the size of the element |
transform: translateY() |
Moves the element vertically |
animation-duration |
Controls how long the animation takes |
animation-timing-function |
Controls the speed curve (ease-in-out for smooth effect) |
animation-iteration-count |
Set to infinite for continuous animation |
Conclusion
Gooey balls animation is an effective way to add visual interest to websites using simple CSS keyframes. By combining scaling, color changes, and movement, you can create engaging animations that enhance user experience with minimal code.
566 Views
