Skip to content

Instantly share code, notes, and snippets.

@carmoreira

carmoreira/bounce.css

Last active May 22, 2020
Embed
What would you like to do?
Bounce Markers Animation - Interactive Geo Maps
.imapsMapImage {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
-webkit-animation-iteration-count: 2;
animation-name: bounce;
-moz-animation-name: bounce;
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment