/* referans animasyonları */
:root {
    --total-delay: 0.15s; /* when the first item should start */
}

.fade-in-tr {
    -webkit-animation: fade-in-tr 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-tr 0.6s cubic-bezier(0.390, 0.575, 0.565,  1.000)  both;
}


@-webkit-keyframes fade-in-tr {
    0% {
        -webkit-transform: translateX(50px) translateY(-50px);
        transform: translateX(50px) translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-tr {
    0% {
        -webkit-transform: translateX(50px) translateY(-50px);
        transform: translateX(50px) translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

.item {
    
    animation-delay: calc((var(--total-delay) * var(--i)));
}