"Shake" CSS Keyframe Animation | CSS-Tricks

This assumes the use of an autoprefixer.
See the Pen “Shake” CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Spectacular Mountain
The thing goes skrrrrrra
Actually knowing the symmetry of movement helps a lot in understanding the basics of this animation. How did you actually came through the best cubic bezier for the timing function?
I use http://easings.net/en It has a few nice examples to choose from!
Hi Farzad! Glad it’s useful. I got the cubic bezier through trial and error, but I experimented a lot using Lea Verou’s tool, http://cubic-bezier.com/
Well thanks for the fast reply
Nice effect, very useful ^_^
.face:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); } }
tiny and nice effect…tnx
Just in case could be useful, there is also CSShake with some customisations available.
Does it work on svgs? I would like to use the animation for svg icons like on this one http://migrera.com
Sure it works on svgand you could target some parts of the icon also. Here is an example using CSShake
That’s really nice. Thank you Lionel.
The example in this post itself is an SVG :) You can hit the edit button to see all of the code on codepen.
Not of you are forced to care about IE11 tho :( https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
If you need to support IE, you can put the animation on a div that wraps it or the SVG tag itself (like you see in this pen) The SVG element is still an HTML element so it can still be animated in that browser.
If you want to animate inside the SVG DOM for older browsers, GreenSock is your best bet- works back to IE9.
I’ve had good luck with SnapSVG as well, for non-CSS animation
seen it now..:) Thanks for the article Sarah.
Amazing animation. One question though: how can i toggle this animation on/off ?
Cuz im adding a class (“shake”) through Jquery, but when i remove it and add it again, or when i use the function toggleClass, the animation doesnt happen.
Take a look at the forked pen where clicking the face add the class shake. Added also a removeClass when animation ends.
It worked. Thanks :)
Thanks for the article. This is not working in IE 11. Any ideas on what would make it work? The image goes away when moving over and then when moving out it comes back with a slight animation, but need to image to not disappear. Thanks!
Why are perspective and backface-visibility used?
I removed them in CodePen and there were no issues. Are they necessary for some browsers?
They are used for hardware acceleration
This is great thanks for posting.
What do I alter to decrease the amount of shaking. I can adjust the time but nothing seems to decrease the horisontal travel, I just want it to be more subtle? Have tried all variables but can’t seem to change it.
How can I get the shaking function vertically?
thanks for tutorial. I am facing a little issue as I have absolutely positioned icon inside of button verticaly centered. translate3D in shake keyframe causes to icon jump to bottom, then shake from side to side. How can I solve this issue? Thank you
.quick_basket .button::after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);} .quick_basket .button:hover::after {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, inherit, 0); backface-visibility: hidden; perspective: 1000px;}