SOURCE

<div class="container">
	<div class="box">
		1 test
	</div>
</div>

@property --var2 {
    syntax: "<width>";
    inherits: true;
    initial-value: 8px;
}

@keyframes fadeInw {
    0% {
        --var2: 8px;
    }
    5% {
        --var2: 16px;
    }
    10% {
        --var2: 20px;
    }
    50% {
        --var2: 25px;
    }
    60% {
        --var2: 30px;
    }
    70% {
        --var2: 35px;
    }
    90% {
        --var2: 40px;
    }
    100% {
        --var2: 45px;
    }
}

@keyframes fadeOutw {
    0% {
        --var2: 45px;
    }
    10% {
        --var2: 40px;
    }
    30% {
        --var2: 35px;
    }
    50% {
        --var2: 30px;
    }
    60% {
        --var2: 25px;
    }
    70% {
        --var2: 20px;
    }
    90% {
        --var2: 16px;
    }
    100% {
        --var2: 8px;
    }
}

.container {
    height: 300px;
    width: 100%;
    overflow-y: scroll;
    background-color: gainsboro;
    border: 1px solid rebeccapurple;
    animation: fadeInw .5s ease-in-out forwards;
}

.container:hover {
    animation: fadeOutw .5s ease-in-out forwards;
}

.container::-webkit-scrollbar {
    height: 50px;
    width: var(--var2);
}

.container::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 4px;
}

.box{
    height: 400px;
    width:100%;
}