.animasi-card-1 {
    animation: animasi1 0.4s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-card-2 {
    animation: animasi1 0.6s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-card-3 {
    animation: animasi1 0.8s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-card-4 {
    animation: animasi1 1.2s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-umum-1 {
    animation: animasi2 0.8s ease-in-out  alternate ;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-umum-2 {
    animation: animasi1 0.8s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-umum-3 {
    animation: animasi4 0.8s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-baris-tabel-col-0 {
    animation: animasi3 0.8s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-baris-tabel-col-1{
    animation: animasi1 0.8s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.animasi-baris-tabel-col-2 {
    animation: animasi1 1s ease-in-out alternate;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}
 
@keyframes animasi1 {
    from {
        transform: translateY(20px);
        opacity: 0.0
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes animasi2 {
    from {
        transform: translateY(-20px);
        opacity: 0.0
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes animasi3 {
    from {
        transform: translateX(-10px);
        opacity: 0.0
    }

    to {
        transform: translateX(0px);
    }
}
@keyframes animasi4 {
    from {
        transform: scale(0.8);
        opacity: 0.0;
    }

    to {
        transform: scale(1);
    }
}