媒体查询后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;
    }
}

因此，这很完美，当屏幕小于767px时，列表中的所有项目从右向右滑动，而当屏幕更大时，则从左侧向左滑动。 当我调整屏幕大小时，动画会再次播放。

现在，当屏幕大于767px时，我希望列表中的所有奇数项从右侧滑入，因此我添加了以下内容：

.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;
        }
    }