diff options
Diffstat (limited to 'static/css/_fades.css')
| -rw-r--r-- | static/css/_fades.css | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/static/css/_fades.css b/static/css/_fades.css new file mode 100644 index 0000000..7e490ab --- /dev/null +++ b/static/css/_fades.css @@ -0,0 +1,38 @@ +/* make keyframes that tell the start state and the end state of our object */ + +@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } +@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } +@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } + +.fade-in { + opacity:0; /* make things invisible upon start */ + -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */ + -moz-animation:fadeIn ease-in 1; + animation:fadeIn ease-in 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: 0.7s; +-moz-animation-delay: 0.7s; +animation-delay: 0.7s; +} + +.fade-in.two { +-webkit-animation-delay: 1.4s; +-moz-animation-delay:1.4s; +animation-delay: 1.4s; +} + +.fade-in.three { +-webkit-animation-delay: 1.8s; +-moz-animation-delay: 1.8s; +animation-delay: 1.8s; +}
\ No newline at end of file |