54 lines
1.3 KiB
CSS
54 lines
1.3 KiB
CSS
|
* {
|
||
|
|
@for $i from 1 to 50 {
|
||
|
|
> .intro-x:nth-child($i) {
|
||
|
|
z-index: calc(50 - $i);
|
||
|
|
opacity: 0;
|
||
|
|
position: relative;
|
||
|
|
transform: translateX(50px);
|
||
|
|
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
animation-delay: calc($i * 0.1s);
|
||
|
|
}
|
||
|
|
> .-intro-x:nth-child($i) {
|
||
|
|
z-index: calc(50 - $i);
|
||
|
|
opacity: 0;
|
||
|
|
position: relative;
|
||
|
|
transform: translateX(-50px);
|
||
|
|
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
animation-delay: calc($i * 0.1s);
|
||
|
|
}
|
||
|
|
> .intro-y:nth-child($i) {
|
||
|
|
z-index: calc(50 - $i);
|
||
|
|
opacity: 0;
|
||
|
|
position: relative;
|
||
|
|
transform: translateY(50px);
|
||
|
|
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
animation-delay: calc($i * 0.1s);
|
||
|
|
}
|
||
|
|
> .-intro-y:nth-child($i) {
|
||
|
|
z-index: calc(50 - $i);
|
||
|
|
opacity: 0;
|
||
|
|
position: relative;
|
||
|
|
transform: translateY(-50px);
|
||
|
|
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
animation-delay: calc($i * 0.1s);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes intro-x-animation {
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes intro-y-animation {
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
}
|
||
|
|
}
|