Last active
March 26, 2017 00:28
-
-
Save casprwang/e722c6776ec156e047894cfbe1ba1c67 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
@-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