Skip to content

Instantly share code, notes, and snippets.

@allenhwkim
Created March 23, 2019 18:41
Show Gist options
  • Select an option

  • Save allenhwkim/575297aad6ae3761409e5dc9e9765363 to your computer and use it in GitHub Desktop.

Select an option

Save allenhwkim/575297aad6ae3761409e5dc9e9765363 to your computer and use it in GitHub Desktop.
css animation bounce in left
.bounce-in-left {
animation: bounce-in-left 1.1s both;
}
@keyframes bounce-in-left {
0% {
transform: translateX(-600px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateX(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateX(-68px);
animation-timing-function: ease-in;
}
72% {
transform: translateX(0);
animation-timing-function: ease-out;
}
81% {
transform: translateX(-28px);
animation-timing-function: ease-in;
}
90% {
transform: translateX(0);
animation-timing-function: ease-out;
}
95% {
transform: translateX(-8px);
animation-timing-function: ease-in;
}
100% {
transform: translateX(0);
animation-timing-function: ease-out;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment