CSS анимация не запускается после медиа-запроса

Question

у меня есть список, который выглядит так

<ul class="timeline-container">
   <li class="timeline-item-container">
       <div class="timeline-item></div>
   </li>
   <li class="timeline-item-container">
       <div class="timeline-item></div>
   </li>
</ul>

Я объявляю 2 анимации

    @keyframes slideLeft
    {
        from {
            transform: translateX(1000px);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes slideRight
    {
        from {
            transform: translateX(-1000px);
        }

        to {
            transform: translateX(0);
        }
    }

Тогда на моем css у меня есть это:

.timeline-item
{
    animation: slideRight .6s ease both;

    @media (max-width:767px)
    {
        animation: slideLeft .6s ease both;
    }
}

Так что это прекрасно работает, все элементы в моем списке скользят справа, когда экран меньше 767 пикселей, и слева, когда он больше. когда я изменяю размер экрана, анимация воспроизводится снова.

Теперь я хочу, чтобы каждый нечетный элемент в списке скользил справа, когда экран больше 767 пикселей, поэтому я добавляю следующее:

.timeline-item-container:nth-child(even) .timeline-item
{
   @media (min-width:767px)
   {
        animation: slideLeft .6s ease both;
   }
}

Это работает, если я обновляю страницу, но если я изменяю размер экрана, анимация не воспроизводится. Он должен воспроизводить анимацию при изменении размера экрана, как раньше

Я знаю, что анимация есть, потому что, если я обновляю ее, она воспроизводится, но не после изменения размера экрана

Любая помощь оценивается

https://jsfiddle.net/7pk6yncd/

Answer 1

Я думаю, что единственный способ - определить одну и ту же анимацию дважды под разными именами. На самом деле используемая вами анимация одинакова, поэтому медиазапрос не будет вызывать ее снова.

.box {
  background:red;

  animation:fromLeft 2s linear forwards;
}

@media all and (max-width:600px) {
.box {
  background:blue;
  display:block;
  animation:fromLeft-alt 2s linear forwards;

}

}

@keyframes fromLeft {
   from {
     transform:translateX(-100%);
   }
}
@keyframes fromLeft-alt {
   from {
     transform:translateX(-100%);
   }
}

<div class="box">
  some content
</div>

Answer 2

Нельзя поместить @media в правило css.

Это работает в другую сторону, вот и все:

    .timeline-item
    {
        animation: slideRight .6s ease both;

    }

    @keyframes slideLeft
    {
        from {
            transform: translateX(1000px);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes slideRight
    {
        from {
            transform: translateX(-1000px);
        }

        to {
            transform: translateX(0);
        }
    }

    @media (max-width:767px)
    {
        .timeline-item{
            animation: slideLeft .6s ease both;
        }
        .timeline-item-container:nth-child(even) .timeline-item
        {
                animation: slideRight .6s ease both;
        }
    }