style.css

:root{
    --speed:.1;
}
#first{
    position: relative;
}
#second{
    position: absolute;
}
.machine{
     background-color: aqua;
     border: dashed 5px red;
     height:400px;
     width: 1000px;
     margin:100px;
     margin-left: 200px;
     margin-top: 200px;
     display: flex;
}
.slot{
        height:350px;
        margin:25px;
        width:300px;
        border:solid 2px violet;
        background-color: lawngreen;
        text-align: center;
        font-size: 100pt;
        line-height: 250px;
        z-index: 1;
        overflow: hidden;
}
#inpspeed{
       font-size: 25pt;
       margin-left: 200px;
       margin-bottom: 300px;
}
.slot >.value
{
    display: inline-block;
    animation-name: slotspin;
    animation-duration: calc(1s/var(--speed));
    animation-iteration-count: infinite;
    z-index: 2;

}
@keyframes slotspin{
    0%{
        transform: translateY(-150px);
    }
    100%{
        transform: translateY(200px);
    }
}