Проблема с расстоянием между картами с анимацией внутри горизонтальной прокрутки

Question

Я пытаюсь отобразить карты в горизонтально прокручиваемом элементе div, который анимируется, постоянно переворачивая и показывая обе стороны. Проблема заключается в том, что по какой-то причине ширина моих классов .storecard автоматически не изменяется в соответствии с размером изображений в них, что приводит к их наложению вместо правильного распределения. Я считаю, что эта проблема с пробелами связана с позиционированием изображений, которые должны быть «абсолютными», чтобы анимация работала должным образом, но я не уверен, как исправить это правильно, не нарушая анимацию.

Кроме того, когда я удаляю все карты, кроме одной, карта не центрируется горизонтально, как это должно быть. Опять же, я считаю, что это связано с позицией: absolute для '.back' и '.front'.

Я работал над исправлением этого вопроса весь день и полностью застрял.

Вот JSFiddle, демонстрирующий проблему: https://jsfiddle.net/t8vgkba5/1/

Вот аналогичный JSFiddle, в котором есть горизонтально прокручиваемый div со встроенными видео на YouTube в каждой .card вместо игральных карт. Интервал здесь правильный, и к чему я стремлюсь с игральными картами: https://jsfiddle.net/53nytacx/

Спасибо!

фрагмент CSS, представленный в JSFiddle:

.front {
    margin: 0 auto;
    visibility: hidden;
    position: absolute;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-animation: swag 5s infinite;
    -moz-animation: swag 5s infinite;
    -o-animation: swag 5s infinite;
    animation: swag 5s infinite;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 1px solid transparent;
}

Answer 1

нашел ответ, это динамично c сейчас https://jsfiddle.net/p8t1qykL/

Я изменил позицию на ".front"

#horizontalcontainer {
    z-index: 0;
    position: absolute;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
}
.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
    background: red;
    height: 50vh;
    width: 100vw;
}

.card {
    display: inline-block;
    padding-right: 40px;
    position: relative;
    height: 100%;
}

.card:first-child{
  padding-left: 40px;
}
.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
}

.back {
    margin: 0 auto;
    position: absolute;
    height:100%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-animation: love 5s infinite;
    -moz-animation: love 5s infinite;
    -o-animation: love 5s infinite;
    animation: love 5s infinite;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 1px solid transparent; 
}
.front {
    margin: 0 auto;
    visibility: hidden;
    position: relative;
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-animation: swag 5s infinite;
    -moz-animation: swag 5s infinite;
    -o-animation: swag 5s infinite;
    animation: swag 5s infinite;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 1px solid transparent;
}