Wiggle Wobble Button
How do I make an wiggle wobble button?
Wiggle a box with CSS3 Transforms and jquery.. What is a wiggle wobble button? How do you make a wiggle wobble button? This script and codes were developed by Oliver Schafeld on 04 October 2022, Tuesday.
Wiggle Wobble Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiggle Wobble Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="animated-example" class="trigger animated wobble">
</div>
<div id="trigger"> click to wiggle </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wiggle Wobble Button - Script Codes CSS Codes
#animated-example { background-color:red; width:200px; height:100px;
}
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle { 0% { transform: skewX(9deg); } 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); }
}
.wiggle { -webkit-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
.animated.wiggle, .animated.wobble { -webkit-animation-duration: 0.75s; animation-duration: 0.75s;
}
/*******************************************/
@-webkit-keyframes wobble { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); }
}
@keyframes wobble { 0% { transform: skewX(-9deg); } 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); }
}
.wobble { -webkit-animation-name: wobble; animation-name: wobble; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
/*
.animated.wobble { -webkit-animation-duration: 0.75s; animation-duration: 0.75s;
}
*/
Wiggle Wobble Button - Script Codes JS Codes
$(function() { var box = $('#animated-example'); // var button = $('#animated-example div'); // var button = $('#animated-example'); // text trigger animation: // var button = $('#trigger'); // square triggers animation: var button = $('.trigger'); button.on('click', function(){ box.toggleClass('wiggle').toggleClass('wobble'); if(box.hasClass('wiggle')) { button.text('wobble'); } else { button.text('wiggle'); } });
});
Developer | Oliver Schafeld |
Username | schafeld |
Uploaded | October 04, 2022 |
Rating | 3 |
Size | 2,166 Kb |
Views | 44,528 |
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!
Name | Size |
Sass Cheat Sheet | 2,396 Kb |
JS Raytracer | 2,434 Kb |
Special Characters | 1,749 Kb |
Qooxdoo Notification | 0 Kb |
Countdown, Webworker | 1,839 Kb |
Angular 1st Demo | 1,656 Kb |
Responsive Image through CSS | 2,240 Kb |
Button Download Flyer rtk-russia.de | 2,252 Kb |
RWD Boilerplate | 3,356 Kb |
HTML5 Canvas Test 1 | 2,128 Kb |
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!
Name | Username | Size |
Masonry | Uriuriuriu | 5,005 Kb |
Welcome | Nakome | 6,076 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Toggle menu | Seyedi | 2,279 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
GsuiPopup | Mr21 | 2,641 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
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!