wallet-web/src/styles/thorn/utilities/animations.scss

.anim-fade-in {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;

    &.fast {
        animation-duration: 300ms;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.anim-fade-out {
    animation-name: fade-out;
    animation-duration: 1s;
    animation-timing-function: ease-out;

    &.fast {
        animation-duration: 0.3s;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.anim-fade-up {
    opacity: 0;
    animation-name: fade-up;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-delay: 1s;
}

@keyframes fade-up {
    0% {
        opacity: 0.8;
        transform: translateY(100%);
    }

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

.anim-fade-down {
    animation-name: fade-down;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

@keyframes fade-down {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.5;
        transform: translateY(100%);
    }
}

.anim-grow-x {
    width: 0%;
    animation-name: grow-x;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-delay: 0.5s;
}

@keyframes grow-x {
    to { width: 100%; }
}

.anim-shrink-x {
    animation-name: shrink-x;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
}

@keyframes shrink-x {
    to { width: 0%; }
}

.anim-scale-in {
    animation-name: scale-in;
    animation-duration: 0.15s;
    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.anim-pulse {
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

    .anim-pulse-in {
    animation-name: pulse-in;
    animation-duration: 0.5s;
}

@keyframes pulse-in {
    0% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.hover-grow {
    transition: transform 0.3s;
    backface-visibility: hidden;

    &:hover {
        transform: scale(1.025);
    }
}