37 lines
658 B
SCSS
37 lines
658 B
SCSS
.fade-in {
|
|
--duration: $fade-in-transition-duration;
|
|
animation-name: fadeIn;
|
|
animation-timing-function: ease-in;
|
|
animation-duration: var(--duration);
|
|
animation-fill-mode:both;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.roll-in {
|
|
--duration: $roll-in-transition-duration;
|
|
animation-name: rollIn;
|
|
animation-timing-function: ease-in;
|
|
animation-duration: var(--duration);
|
|
animation-fill-mode:both;
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform:translateX(-100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform:translateX(0);
|
|
}
|
|
}
|
|
|