This assumes the use of an autoprefixer.<\/p>\n
.face:hover {\r\n animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;\r\n transform: translate3d(0, 0, 0);\r\n backface-visibility: hidden;\r\n perspective: 1000px;\r\n}\r\n\r\n@keyframes shake {\r\n 10%, 90% {\r\n transform: translate3d(-1px, 0, 0);\r\n }\r\n \r\n 20%, 80% {\r\n transform: translate3d(2px, 0, 0);\r\n }\r\n\r\n 30%, 50%, 70% {\r\n transform: translate3d(-4px, 0, 0);\r\n }\r\n\r\n 40%, 60% {\r\n transform: translate3d(4px, 0, 0);\r\n }\r\n}<\/code><\/pre>\nSee the Pen “Shake” CSS snippet for CSS-Tricks<\/a> by Sarah Drasner (@sdras<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"This assumes the use of an autoprefixer. .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: […]<\/p>\n","protected":false},"author":7699,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":206892,"position":0},"title":"Useful CSS3 Less Mixins","date":"December 16, 2011","format":false,"excerpt":".text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0,\u2026","rel":"","context":"With 51 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14123,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","url_meta":{"origin":206892,"position":1},"title":"transform","date":"September 6, 2011","format":false,"excerpt":"The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size: CodePen Embed Fallback Giving this function\u2026","rel":"","context":"With 57 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356211,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/translate\/","url_meta":{"origin":206892,"position":2},"title":"translate","date":"November 9, 2021","format":false,"excerpt":"The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axes, similar to how you might think of moving an element using offsets, like top, bottom, left, and right. .element { translate:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356179,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/rotate\/","url_meta":{"origin":206892,"position":3},"title":"rotate","date":"November 8, 2021","format":false,"excerpt":"The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, gradian, radian, and turn values. .element { rotate: 45deg; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-favicon-rotate.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8044,"url":"https:\/\/css-tricks.com\/snippets\/css\/page-curl-shadows\/","url_meta":{"origin":206892,"position":4},"title":"Page Curl Shadows","date":"December 7, 2010","format":false,"excerpt":"ul.box { position: relative; z-index: 1; \/* prevent shadows falling behind containers with backgrounds *\/ overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.box li { position: relative; float: left; width: 250px; height: 150px; padding: 0; border: 1px solid #efefef; margin: 0 30px 30px 0; background: #fff; -webkit-box-shadow: 0\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":197380,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/","url_meta":{"origin":206892,"position":5},"title":"will-change","date":"March 5, 2015","format":false,"excerpt":"The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation. Syntax will-change: = scroll-position | contents | Initial value: autoApplies to: all elementsInherited: noPercentages: n\/aComputed value: specific valuedAnimation\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/206892"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=206892"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/206892\/revisions"}],"predecessor-version":[{"id":206996,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/206892\/revisions\/206996"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=206892"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=206892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}