animation.css

.container{
    width: 100%;
}

.foo{
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) !important;
}

.img{
    position: absolute;
    width: 200px;
    user-select: none;
}

.elevate{
    z-index: 1;
    transition: all 0.6s ease-out;
}

.elevate-locale{
    position: absolute;
    top: 50px;
}

.elevate-locale.left{
    margin-left: 60px;
}

.elevate-locale.right{
    margin-right: 60px;
}

.elevate-locale.center{
    margin-left: 0;
}

animation.html

<div class="container">
    <div class="foo">
        <div class="elevate-locale right">
            <img style="z-index:3" class="img elevate" style="top:0" src="money.png">
        </div>
        <img style="z-index:5" class="img" src="money.png">
        <div class="elevate-locale left">
            <img style="z-index:-1" class="img elevate" style="top:0" src="money.png">
        </div>
        <div class="elevate-locale">
            <img style="z-index:4" class="img elevate" style="top:0" src="money.png">
        </div>
    </div>
    <input min="1" max="30" type="number" id="value" value="0" onchange="increaseMoney()">
    Budget : R$<span id="value-field"></span>

</div>

</div>

<link rel="stylesheet" href="animation.css">
<script src="animation.js"></script>

animation.js

const numberInput = document.getElementById('value');
const moneyElevate = document.getElementsByClassName('elevate');
const valueField = document.getElementById('value-field');
increaseMoney();

function increaseMoney() {
    let value = numberInput.value;
    valueField.textContent = value;
    elevateMoney(value);
}

function elevateMoney(value) {
    moneyElevate[0].style.top = (value*5) *-1;
    moneyElevate[1].style.top = (value*3) *-1;
    moneyElevate[2].style.top = (value*7) *-1;
}