Skip to content

Instantly share code, notes, and snippets.

@melchoyce
Last active September 27, 2017 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save melchoyce/fc28e4b6c643e85331779bfce0b006d8 to your computer and use it in GitHub Desktop.
Save melchoyce/fc28e4b6c643e85331779bfce0b006d8 to your computer and use it in GitHub Desktop.
Bouncing animation from WordPress.com
.cdm-subtle-focus {
-webkit-animation: bounce .7s 1;
animation: bounce .7s 1;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -12px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -6px, 0);
}
90% {
-webkit-transform: translate3d(0,-1px,0);
}
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -12px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -6px, 0);
}
90% {
transform: translate3d(0,-1px,0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment