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.

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!

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.

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

Hey Roland! I’m not familiar with PrestaShop personally, but if they provide you with access to edit CSS and you have the class name for the buttons, then you should be good to go to apply the animation. :)

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.