Forked from nisanthchunduru/CSS keyframes fade in transitions and animation syntax.css
Created
June 4, 2019 07:12
-
-
Save AndresGol/8cd85e7d6783485c9d8380f0f0421bef to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.fadeinDown { | |
-webkit-animation: fadeInDown 500ms ease-in-out; /* Chrome, Safari, Opera */ | |
animation: fadeInDown 500ms ease-in-out; | |
} | |
/* Chrome, Safari, Opera */ | |
@-webkit-keyframes fadeInDown { | |
0% { | |
opacity: 0; | |
-webkit-transform: translateY(-40px); | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: translateY(0); | |
} | |
} | |
/* Standard syntax */ | |
@keyframes fadeInDown { | |
0% { | |
opacity: 0; | |
transform: translateY(-40px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
.fadeinUp { | |
-webkit-animation: fadeInUp 500ms ease-in-out; /* Chrome, Safari, Opera */ | |
animation: fadeInUp 500ms ease-in-out; | |
} | |
/* Chrome, Safari, Opera */ | |
@-webkit-keyframes fadeInUp { | |
0% { | |
opacity: 0; | |
-webkit-transform: translateY(40px); | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: translateY(0); | |
} | |
} | |
/* Standard syntax */ | |
@keyframes fadeInUp { | |
0% { | |
opacity: 0; | |
transform: translateY(40px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
.fadeInLeft { | |
-webkit-animation: fadeInLeft 500ms ease-in-out; /* Chrome, Safari, Opera */ | |
animation: fadeInLeft 500ms ease-in-out; | |
} | |
/* Chrome, Safari, Opera */ | |
@-webkit-keyframes fadeInLeft { | |
0% { | |
opacity: 0; | |
-webkit-transform: translateX(80px); | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: translateY(0); | |
} | |
} | |
/* Standard syntax */ | |
@keyframes fadeInLeft { | |
0% { | |
opacity: 0; | |
transform: translateX(80px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
.fadeInRight { | |
-webkit-animation: fadeInRight 500ms ease-in-out; /* Chrome, Safari, Opera */ | |
animation: fadeInRight 500ms ease-in-out; | |
} | |
/* Chrome, Safari, Opera */ | |
@-webkit-keyframes fadeInRight { | |
0% { | |
opacity: 0; | |
-webkit-transform: translateX(-80px); | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: translateY(0); | |
} | |
} | |
/* Standard syntax */ | |
@keyframes fadeInRight { | |
0% { | |
opacity: 0; | |
transform: translateX(-80px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment