Skip to content

Instantly share code, notes, and snippets.

@casprwang
Last active March 26, 2017 00:28
Show Gist options
  • Save casprwang/e722c6776ec156e047894cfbe1ba1c67 to your computer and use it in GitHub Desktop.
Save casprwang/e722c6776ec156e047894cfbe1ba1c67 to your computer and use it in GitHub Desktop.
@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in-out 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in-out 1;
animation:fadeIn ease-in-out 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.8s;
-moz-animation-delay:1.8s;
animation-delay: 1.8s;
}
.fade-in.three {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
animation-delay: 2.0s;
}
.fade-in.four {
-webkit-animation-delay: 2.25s;
-moz-animation-delay: 2.25s;
animation-delay: 2.25s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment