How to fix this meter display animation from bottom to up using HTML and CSS?

I am working on a Blazor Hybrid Project (Web App) that have a meter display component. This meter display component will display string of numbers that resembles a real meter display. When a new number is about to be displayed, I want the animation to be from bottom to top, to again resemble how a real life meter display animation look like.

Here is what I have. There is no animation currently. the digit just switches :

Here is what I am trying to achieve. Bottom to up animation :

So far, I have tried to create a keyframe slide-up to translate the new digits from bottom to up and push the old one to above area and set the area overflow=hidden. But, upon debugging, it looks like the animation is not working. I used this method based on a tutorial on creating custom keyframes online, and I create this myself. Am I doing this correctly?

CurrentMeterDisplayContainer.razor

@rendermode InteractiveAuto
@implements IDisposable
@using System.Threading

<div class="meter-container">

    <div class="meter-reading">

        @for (int i = 0; i < meterReading.CurrentValue.Length; i++)
        {
            var digit = meterReading.CurrentValue[i];

            <div class="digit-container">

                <div class="digit-slide-up">

                    <span class="@(i >= meterReading.CurrentValue.Length - 2 ? "digit last-digits" : "digit")">@digit</span>

                </div>

            </div>
            
        }

    </div>

</div>

@code {
    private CurrentMeterReadings meterReading = new CurrentMeterReadings();
    private Timer timer;

    protected override void OnInitialized()
    {
        meterReading.UpdateReading(); 
        timer = new Timer(_ => UpdateMeter(), null, 0, 5000); 
    }

    private void UpdateMeter()
    {
        meterReading.UpdateReading();
        InvokeAsync(StateHasChanged);
    }


    public void Dispose()
    {
        timer?.Dispose();
    }
}

CurrentMeterDisplayContainer.razor.css:

.meter-container {
    padding: 2px;
    /* height: 100%; */
    background-color: #fff;
    border-radius: 5px;
}

.meter-reading {
    display: flex;
}

.digit-container {
    /* padding: 1px; */
    margin: 2px;
    background-color: #fff;
    border-radius: 5px;
    width: 22px;
    height: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.digit {
    font-family: "Bebas Regular";
    font-size: 1.2rem;
    padding: 2px;
    margin: 1px;
    background-color: #eeeeee;
    width: 75%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.last-digits {
    color: #EF4B4B;
}

.digit-slide-up {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

For the model class, its just simple and straight forward. It has a List of int numbers and a function to change the numbers to strings.