Почему по окончании анимации (появление снизу-в-верх) блок с картинками дергаются?

Question

[Андрей Иванов]

<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)

Видео

Comments

[Rustam Bainazarov]

Можна, пожалуста, ссилку на стараницу?

Если серьёзно, то ссылка нужна.

А если ещё серьезнее, то проблема ваша заключается скорее всего в том, что ваша анимация сделана неверно. И заканчивается не в исходной точке положения элемента. После завершения анимации, у вас, соответственно, скачок от места последнего keyframe'a до заданных значений свойств.

[Rustam Bainazarov]

Ну или разместите ваш код куда-нибудь на jsfiddle.net.

[Rustam Bainazarov]

Вот пример подобной анимации:

[Антон Усачев]

Да. И позиционирование тоже лучше прописывать один раз. =)

.content-projects
    position: relative
.............
    position: fixed