Станислав

Можно попробовать такие варианты:
background: url("../img/image.jpg") no-repeat center top/contain;
background: url("../img/image.jpg") no-repeat center center/cover;
background: url("../img/image.jpg") no-repeat center top / cover;
background: no-repeat top/100% url("../img/image.jpg");
background: no-repeat center/100% url("../img/image.jpg");

Можно попробовать через from to:

.element:hover {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

Сделал решение, которое возможно то что нужно (в тело слайда можно добавить все что нужно, количество слайдов гибко меняется):
https://jsfiddle.net/Logic2/htr83Lq2/426/

Необходимо заменить в position: fixed; вместо top: ... ; заменить на bottom: ...; и привязываться к низу вьюпорта