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.