fleet/frontend/styles/global/_animations.scss

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-and-scale {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scale-up {
    from {
        transform: scale(0.75);
    }
    to {
        transform: scale(1);
    }
}

// Page transition animation
@keyframes page-transition {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.loading-placeholder {
    $from: #f5f5f5;
    $to: scale-color($from, $lightness: -10%);

    height: 100%;
    width: 100%;
    background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
    background-size: 400% 400%;
    animation: pulse 1s ease-in-out infinite;

    @keyframes pulse {
        0% {
            background-position: 0% 0%
        }

        100% {
            background-position: -135% 0%
        }
    }
}