CSS Keyframe Bounce Shake Presets
Copy ready-made CSS keyframe animation presets.
Ready-made motion
Bounce, shake, and pulse effects are common but fiddly to hand-write with @keyframes. These presets hand you the keyframes and animation shorthand for each, so you can drop a named effect straight into your stylesheet.
They suit form-error shakes, attention-drawing bounces, and subtle loading pulses, all without pulling in a JavaScript animation library. Each preset sets a sensible default duration and easing, so the motion reads correctly the moment you paste it in, and you can tune the timing afterward to taste.
Copy-ready keyframes
Muting these under prefers-reduced-motion for users who ask for less motion keeps them accessible. The CSS is generated in your browser and never uploaded.
Frequently asked questions
What does each preset do?
bounce moves up 18px and back, shake nudges 8px left and right, pulse scales to 1.08, and wobble rotates 5 degrees each way. All run at 900ms ease-in-out on a loop.
How do I play a preset once, such as shaking an invalid field?
Change "infinite" to 1 and add the animated class with JavaScript when the error happens, then remove it on animationend so it can replay.
Should I respect reduced-motion settings?
Yes. Wrap the animation in @media (prefers-reduced-motion: no-preference), or turn it off under prefers-reduced-motion: reduce, for people who get dizzy from motion.
Related tools
Practical utilities for front-end design and implementation work.