CSS Wiggle
How do I make an css wiggle?
CSS animation and blur filter experiment. WebKit only for the blur.. What is a css wiggle? How do you make a css wiggle? This script and codes were developed by Hakim El Hattab on 24 September 2022, Saturday.
CSS Wiggle Previews
CSS Wiggle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Wiggle</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes wiggle { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); }
}
div { position: absolute; left: 50%; top: 50%;
}
b { position: absolute; display: block; border-radius: 5%; transform: rotate(-10deg);
}
b:nth-child(1) { width: 20px; height: 20px; left: -10px; top: -10px; -webkit-filter: blur(0.3px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms infinite alternate;
}
b:nth-child(2) { width: 40px; height: 40px; left: -20px; top: -20px; -webkit-filter: blur(0.6px); box-shadow: 0 0 4px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms infinite alternate;
}
b:nth-child(3) { width: 60px; height: 60px; left: -30px; top: -30px; -webkit-filter: blur(0.9px); box-shadow: 0 0 6px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms infinite alternate;
}
b:nth-child(4) { width: 80px; height: 80px; left: -40px; top: -40px; -webkit-filter: blur(1.2px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite alternate;
}
b:nth-child(5) { width: 100px; height: 100px; left: -50px; top: -50px; -webkit-filter: blur(1.5px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 250ms infinite alternate;
}
b:nth-child(6) { width: 120px; height: 120px; left: -60px; top: -60px; -webkit-filter: blur(1.8px); box-shadow: 0 0 12px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 300ms infinite alternate;
}
b:nth-child(7) { width: 140px; height: 140px; left: -70px; top: -70px; -webkit-filter: blur(2.1px); box-shadow: 0 0 14px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 350ms infinite alternate;
}
b:nth-child(8) { width: 160px; height: 160px; left: -80px; top: -80px; -webkit-filter: blur(2.4px); box-shadow: 0 0 16px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite alternate;
}
b:nth-child(9) { width: 180px; height: 180px; left: -90px; top: -90px; -webkit-filter: blur(2.7px); box-shadow: 0 0 18px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 450ms infinite alternate;
}
b:nth-child(10) { width: 200px; height: 200px; left: -100px; top: -100px; -webkit-filter: blur(3px); box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms infinite alternate;
}
b:nth-child(11) { width: 220px; height: 220px; left: -110px; top: -110px; -webkit-filter: blur(3.3px); box-shadow: 0 0 22px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 550ms infinite alternate;
}
b:nth-child(12) { width: 240px; height: 240px; left: -120px; top: -120px; -webkit-filter: blur(3.6px); box-shadow: 0 0 24px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite alternate;
}
b:nth-child(13) { width: 260px; height: 260px; left: -130px; top: -130px; -webkit-filter: blur(3.9px); box-shadow: 0 0 26px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 650ms infinite alternate;
}
b:nth-child(14) { width: 280px; height: 280px; left: -140px; top: -140px; -webkit-filter: blur(4.2px); box-shadow: 0 0 28px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 700ms infinite alternate;
}
b:nth-child(15) { width: 300px; height: 300px; left: -150px; top: -150px; -webkit-filter: blur(4.5px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 750ms infinite alternate;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!--
Inspired by https://patakk.tumblr.com/post/33246753785
Webkit only (CSS filters)
-->
<div>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>
</body>
</html>
CSS Wiggle - Script Codes CSS Codes
@keyframes wiggle { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); }
}
div { position: absolute; left: 50%; top: 50%;
}
b { position: absolute; display: block; border-radius: 5%; transform: rotate(-10deg);
}
b:nth-child(1) { width: 20px; height: 20px; left: -10px; top: -10px; -webkit-filter: blur(0.3px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms infinite alternate;
}
b:nth-child(2) { width: 40px; height: 40px; left: -20px; top: -20px; -webkit-filter: blur(0.6px); box-shadow: 0 0 4px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms infinite alternate;
}
b:nth-child(3) { width: 60px; height: 60px; left: -30px; top: -30px; -webkit-filter: blur(0.9px); box-shadow: 0 0 6px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms infinite alternate;
}
b:nth-child(4) { width: 80px; height: 80px; left: -40px; top: -40px; -webkit-filter: blur(1.2px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite alternate;
}
b:nth-child(5) { width: 100px; height: 100px; left: -50px; top: -50px; -webkit-filter: blur(1.5px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 250ms infinite alternate;
}
b:nth-child(6) { width: 120px; height: 120px; left: -60px; top: -60px; -webkit-filter: blur(1.8px); box-shadow: 0 0 12px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 300ms infinite alternate;
}
b:nth-child(7) { width: 140px; height: 140px; left: -70px; top: -70px; -webkit-filter: blur(2.1px); box-shadow: 0 0 14px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 350ms infinite alternate;
}
b:nth-child(8) { width: 160px; height: 160px; left: -80px; top: -80px; -webkit-filter: blur(2.4px); box-shadow: 0 0 16px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite alternate;
}
b:nth-child(9) { width: 180px; height: 180px; left: -90px; top: -90px; -webkit-filter: blur(2.7px); box-shadow: 0 0 18px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 450ms infinite alternate;
}
b:nth-child(10) { width: 200px; height: 200px; left: -100px; top: -100px; -webkit-filter: blur(3px); box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms infinite alternate;
}
b:nth-child(11) { width: 220px; height: 220px; left: -110px; top: -110px; -webkit-filter: blur(3.3px); box-shadow: 0 0 22px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 550ms infinite alternate;
}
b:nth-child(12) { width: 240px; height: 240px; left: -120px; top: -120px; -webkit-filter: blur(3.6px); box-shadow: 0 0 24px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite alternate;
}
b:nth-child(13) { width: 260px; height: 260px; left: -130px; top: -130px; -webkit-filter: blur(3.9px); box-shadow: 0 0 26px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 650ms infinite alternate;
}
b:nth-child(14) { width: 280px; height: 280px; left: -140px; top: -140px; -webkit-filter: blur(4.2px); box-shadow: 0 0 28px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 700ms infinite alternate;
}
b:nth-child(15) { width: 300px; height: 300px; left: -150px; top: -150px; -webkit-filter: blur(4.5px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 750ms infinite alternate;
}
| Developer | Hakim El Hattab |
| Username | hakimel |
| Uploaded | September 24, 2022 |
| Rating | 4.5 |
| Size | 3,233 Kb |
| Views | 44,528 |
Do you need developer help for CSS Wiggle?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hakim El Hattab (hakimel) Script Codes
| Name | Size |
| Monocle List | 4,124 Kb |
| 404 | 3,893 Kb |
| Hypnos | 2,937 Kb |
| Kontext | 4,490 Kb |
| Animated Line Chart | 3,305 Kb |
| Linjer | 4,882 Kb |
| Magnetic | 4,103 Kb |
| Avgrund | 3,474 Kb |
| Blob | 6,452 Kb |
| Ladda | 6,843 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
| Codero Sitemap | S1m0ne | 28,169 Kb |
| Minimelephant | Smashlee | 2,507 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
| Social buttons | Flacu | 2,022 Kb |
| BlueBox Fork | Huskynation | 12,675 Kb |
| Side Sliding Menu CSS | EduardL | 4,388 Kb |
| Heatmap Color Scales | Stevepepple | 2,331 Kb |
| Apple website | Jds317 | 1,835 Kb |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!