.shad-enter-active {
    animation: shad-in .1s;
}
.shad-leave-active {
    animation: shad-in .1s reverse;
}
@keyframes shad-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cars-enter-active {
    animation: card-menu .3s;
}
.cars-leave-active {
    animation: card-menu .3s reverse;
}
@keyframes card-menu {
    0% {
        left: -230px;
    }
    100% {
        left: 0;
    }
}

@keyframes loader-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loader-progress {
    0% {
        stroke-dasharray: 50 218;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 218 50;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 50 218;
        stroke-dashoffset: -268;
    }
}
@keyframes bask {
    0% {
        opacity: 1;
    }
    60% {
        transform: translate(60px,-20px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(40px,50px) scale(.6);
    }
}

.mess-enter-active {
    animation: mess-in 0.6s;
}
.mess-leave-active {
    animation: mess-in 0.5s reverse;
}
@keyframes mess-in {
    0% {
        opacity: 0;
        transform: translateX(350px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.help-enter-active {
    animation: help-in 0.6s;
}
.help-leave-active {
    animation: help-in 0.5s reverse;
}
@keyframes help-in {
    0% {
    //display: block;
        height: 0;
    }
    100% {
        height: auto;
    }
}