52 lines
1.1 KiB
CSS
52 lines
1.1 KiB
CSS
|
@-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; } }
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--ofset-time-cb: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in {
|
||
|
|
opacity:0;
|
||
|
|
-webkit-animation:fadeIn ease-in 1;
|
||
|
|
-moz-animation:fadeIn ease-in 1;
|
||
|
|
animation:fadeIn ease-in 1;
|
||
|
|
|
||
|
|
-webkit-animation-fill-mode:forwards;
|
||
|
|
-moz-animation-fill-mode:forwards;
|
||
|
|
animation-fill-mode:forwards;
|
||
|
|
|
||
|
|
-webkit-animation-duration:1s;
|
||
|
|
-moz-animation-duration:1s;
|
||
|
|
animation-duration:1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in.zero {
|
||
|
|
-webkit-animation-delay: var(--ofset-time-cb);
|
||
|
|
-moz-animation-delay: var(--ofset-time-cb);
|
||
|
|
animation-delay: var(--ofset-time-cb);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in.one {
|
||
|
|
-webkit-animation-delay: 0.7s;
|
||
|
|
-moz-animation-delay: 0.7s;
|
||
|
|
animation-delay: 0.7s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in.two {
|
||
|
|
-webkit-animation-delay: 1.2s;
|
||
|
|
-moz-animation-delay:1.2s;
|
||
|
|
animation-delay: 1.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in.three {
|
||
|
|
-webkit-animation-delay: 1.6s;
|
||
|
|
-moz-animation-delay: 1.6s;
|
||
|
|
animation-delay: 1.6s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-in.four {
|
||
|
|
-webkit-animation-delay: 2.1s;
|
||
|
|
-moz-animation-delay: 2.1s;
|
||
|
|
animation-delay: 2.1s;
|
||
|
|
}
|