Почему на CSS-слайдере съезжает вниз один слайд?

Question

[andrew_andrey]

Друзья, добрый день. Возникла проблема со слайдером на css. Во время первого кадра анимации slide-1 уходит вниз. В чем может быть дело?

https://codepen.io/anon/pen/gxOzwm - на codepen.io





.promo-slider {
width:620px;
min-height:260px;
overflow: hidden;
position: relative;
}

.slide-1 {
position: absolute;
width:620px;
min-height:260px;
background: url("https://i.imgur.com/T7FqI3X.png");
background-repeat: no-repeat;
animation-name: slider-1;
animation-duration: 16s;
animation-delay: 3s;
animation-iteration-count: infinite;


}

.slide-2 {
position: absolute;
width:620px;
min-height:260px;
background: url("https://i.imgur.com/qDLn21l.png");
background-position: -620px;
background-repeat: no-repeat;
animation-name: slider-2;
animation-duration: 16s;
animation-delay: 3s;
animation-iteration-count: infinite;
}

@keyframes slider-1 {
30% {
background-position: 620px;
}

50% {
background-position: -620px;
}
80% {
background-position: 0px;
}
100% {
background-position: 0px;
}
}

@keyframes slider-2 {
30% {
background-position: 0px;
}

50% {
background-position: 0px;
}

80% {
background-position: 620px;
}
100% {
background-position: 620px;
}
}

Comments

[Сергей Тутуков]

Нужно задать размер блока - равный размеру картинки
min-height:266px;
Браузер не успевает смещать и подгонять по размеру картинку

[andrew_andrey]

Сергей Тутуков: ААА, я размер картинки прогядел)) Огромное спасибо, буду внимательней. Все работает.