Why does the block with pictures twitch at the end of the animation (appearance from bottom to top)?

Question

css

<div className="main-wrapper-page">
                    <header />
                    <div class="hr"> </div>
                    <div class="content-projects">
                        <>
                            <FilterPanel />
                            <div class="wrapper-cart-project">
                                ...
                            </div>
                        </>
                    </div>
            </div>

.main-wrapper-page
                animation: showPageIndex 2s ease-in-out
.content-projects
    position: relative
    margin-top: 159px
    padding-left: 32px
    padding-right: 32px
    min-height: calc(100vh - 159px)
    padding-bottom: 0
    overflow-y: hidden
display: block
                position: fixed
    top: 159px
    width: 344px
    padding-top: 38px
    padding-left: 32px
    background-color: #fff

@keyframes showPageIndex
  0%
    opacity: 0
    transform: translate(0, 100px)
  100%
    opacity: 1
    transform: translate(0, -159px)

Video