Skip to content

Instantly share code, notes, and snippets.

@fribibb
Created November 16, 2018 02:13
Show Gist options
  • Save fribibb/d0bc2097403e4b556dda3b8bc54096c8 to your computer and use it in GitHub Desktop.
Save fribibb/d0bc2097403e4b556dda3b8bc54096c8 to your computer and use it in GitHub Desktop.
// Based off:
// https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
.shake: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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment