Subtle Wiggle Animation

Developer
Mark Peck
Size
2,072 Kb
Views
26,312
  1. Subtle Wiggle Animation Previews
  2. Subtle Wiggle Animation HTML Codes
  3. Subtle Wiggle Animation CSS Codes
  4. Subtle Wiggle Animation JS Codes

How do I make an subtle wiggle animation?

Little bit of jQuery with transit.js to do a slight rotate wiggle animation. Codepen for some odd reason makes the page flash.... What is a subtle wiggle animation? How do you make a subtle wiggle animation? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

Subtle Wiggle Animation Previews
IQ Test

Subtle Wiggle Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle Wiggle Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Dance kitteh!</h1>
<img src="http://placekitten.com/300/300/">
<input type="button" value="wiggle!"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Subtle Wiggle Animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Leckerli+One);
body { margin: 0; padding: 0; background: #2a2a2a; font-family: 'Leckerli One'; color: #fff;
}
img { display: block; position: relative; margin: 0px auto; border: 1px solid #000; border-radius: 20px; box-shadow: 0 0 15px #222;
}
h1 { text-align: center;
}
input { display: block; position: relative; margin: 40px auto; padding: 16px 28px; cursor: pointer; font-size: 18px; background: none; border: 2px solid #fff; border-radius: 30px; color: #fff;
}
input:hover { background: rgba(255, 255, 255, 0.2); -webkit-transition: all 0.2s ease;
}

Subtle Wiggle Animation - Script Codes JS Codes

$('input').click(function() { $('img') .transition({rotate: '2deg'}, 100) .transition({rotate: '-2deg'}, 100) .transition({rotate: '0deg'}, 100)
});
Subtle Wiggle Animation - Script Codes
Subtle Wiggle Animation - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 3
Size 2,072 Kb
Views 26,312
Do you need developer help for Subtle Wiggle Animation?

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!

Mark Peck (doodlemarks) Script Codes
Name
Hexagons in CSS
Colors
Styling Selects in CSS SUCKSSS
Crown Loader Animation
Very Simple Slider
CSS Navigation Menu
Refract Light Overlay
Bootstrap Styleguide
Simple Accurate Counter
Automated Browser Mockup
Create amazing sales emails 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!