pianello-api/resources/css/components/_intro.css

54 lines
1.3 KiB
CSS
Raw Normal View History

* {
@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);
}
}