Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save omurphy27/322fb0d108098f72e689 to your computer and use it in GitHub Desktop.
Save omurphy27/322fb0d108098f72e689 to your computer and use it in GitHub Desktop.
CSS keyframes fade in transitions and animation syntax.css
.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