Skip to content

Instantly share code, notes, and snippets.

@Yorgg

Yorgg/css animations

Created Apr 21, 2018
Embed
What would you like to do?
@keyframes bounce {
0% {
-moz-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-webkit-transform: scale(0.2);
}
20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes slideIn {
0% {opacity: 0;
margin-left: 100%;
width: 100%; }
90% { opacity: 0.60 }
100% {opacity: 1;
margin-left: 0%;
width: 100%;
}
}
&:hover {
transform: scale(1.05);
cursor: pointer;
webkit-transform: scale(1.05);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment