Html 媒体查询后未触发css动画

我有一张这样的清单

<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>

然后在我的css上，我有以下内容：

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

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

因此，这是完美的，当屏幕小于767px时，我列表中的所有项目都从右侧滑入，当屏幕大于767px时，从左侧滑入。当我调整屏幕大小时，动画将再次播放

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

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

如果我刷新页面，但如果我调整屏幕大小，动画就不会播放。它应该在屏幕像以前一样调整大小时播放动画

我知道动画在那里，因为如果我刷新它，它就会播放，而不是在我调整屏幕大小之后

任何帮助都是值得的

---

您不能在css规则中放置

@media

另一种方式是这样的，给你：

。时间线项目
{
动画：slideRight.6s轻松播放；
}
@关键帧滑动
{
从{
转换：translateX（1000px）；
}
到{
变换：translateX（0）；
}
}
@关键帧幻灯片灯光
{
从{
转换：translateX（-1000px）；
}
到{
变换：translateX（0）；
}
}
@介质（最大宽度：767px）
{
.时间表项目{
动画：slideLeft.6s，两者都轻松；
}
.timeline项容器：第n个子项（偶数）。timeline项
{
动画：slideRight.6s轻松播放；
}
}

我认为唯一的方法是用不同的名称定义同一个动画两次。实际上，您正在使用的动画是相同的，因此媒体查询不会再次触发它

.box{
背景：红色；
动画：从左2直线向前；
}
@全部和全部介质（最大宽度：600px）{
.盒子{
背景：蓝色；
显示：块；
动画：从左alt 2s线性向前；
}
}
@从左到右的关键帧{
从{
转化：translateX（-100%）；
}
}
@左alt的关键帧{
从{
转化：translateX（-100%）；
}
}

一些内容

您好，我使用的是sass，因此媒体查询在类内工作。我已经在外面试过了，但仍然有同样的问题。@Racheldocketr，好的。Sass不是动态的。您将无法实时生成或设置CSS属性和值的动画。但是你可以更有效地生成它们，让标准属性（例如CSS动画）我想你可以在这里找到更多细节：你能创建工作示例吗？@TemaniafHi如果我包括了一个JSFIDLE，你可以看到动画在运行时可以正常工作，但是当你调整大小时，只有1个runsit可以正常工作，如果你调整小提琴的大小，它是repeating@TemaniAfif你在用chrome吗？也许只是我的电脑。对我来说，当我重新调整大小时，顶栏根本没有动画。你想再次触发相同的动画吗？啊，这很有意义，我可以定义为一个不同的名称，很好，谢谢！

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