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
Selected Reading
Wiggle Animation Effect with CSS
The wiggle animation effect creates small rapid movements that make an element appear to shake or vibrate from side to side. This effect is commonly used to draw attention to buttons, icons, or other interactive elements.
Syntax
@keyframes wiggle {
0%, 100% { transform: skewX(0deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
/* ... additional keyframe steps ... */
}
.element {
animation: wiggle duration timing-function;
}
Example: Basic Wiggle Animation
The following example demonstrates a wiggle effect applied to a colorful box −
<!DOCTYPE html>
<html>
<head>
<style>
.wiggle-box {
width: 100px;
height: 100px;
background-color: #ff6b6b;
margin: 50px auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: wiggle 0.75s ease-in-out infinite;
}
@keyframes wiggle {
0% { transform: skewX(0deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
30% { transform: skewX(-6deg); }
40% { transform: skewX(5deg); }
50% { transform: skewX(-4deg); }
60% { transform: skewX(3deg); }
70% { transform: skewX(-2deg); }
80% { transform: skewX(1deg); }
90% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
</style>
</head>
<body>
<div class="wiggle-box">Wiggle!</div>
</body>
</html>
A red rounded box with white text "Wiggle!" appears on the page, continuously wiggling from side to side with a skewing motion.
Example: Button Wiggle on Hover
This example shows how to apply the wiggle effect when hovering over a button −
<!DOCTYPE html>
<html>
<head>
<style>
.wiggle-button {
padding: 12px 24px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 50px;
transition: background-color 0.3s;
}
.wiggle-button:hover {
background-color: #45a049;
animation: wiggle 0.5s ease-in-out;
}
@keyframes wiggle {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-3px); }
20% { transform: translateX(3px); }
30% { transform: translateX(-2px); }
40% { transform: translateX(2px); }
50% { transform: translateX(-1px); }
60% { transform: translateX(1px); }
}
</style>
</head>
<body>
<button class="wiggle-button">Hover me!</button>
</body>
</html>
A green button appears on the page. When you hover over it, the button wiggles horizontally and changes to a darker green color.
Key Properties
| Property | Description |
|---|---|
animation-duration |
Controls how fast the wiggle occurs (e.g., 0.5s for quick, 1s for slower) |
animation-timing-function |
Affects the acceleration (ease-in-out, linear, etc.) |
transform |
Use skewX() for angular wiggle or translateX() for horizontal wiggle |
animation-iteration-count |
Set to infinite for continuous wiggle or a number for limited repeats |
Conclusion
The wiggle animation effect is perfect for creating attention-grabbing elements. Use skewX() for angular wiggling or translateX() for horizontal movement, and adjust the duration and timing function to match your design needs.
Updated on: 2026-03-15T11:39:54+05:30
615 Views
Advertisements