我有一个看起来像这样的列表
<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 像素时,则从左侧滑入。当我调整屏幕大小时,动画再次播放。
现在,当屏幕大于 767px 时,我希望列表中的每个奇数项都从右侧滑入,所以我添加:
.timeline-item-container:nth-child(even) .timeline-item
{
@media (min-width:767px)
{
animation: slideLeft .6s ease both;
}
}
如果我刷新页面,这会起作用,但如果我调整屏幕大小,则动画不会播放。它应该像以前一样在屏幕调整大小时播放动画
我知道动画在那里,因为如果我刷新它,它就会播放,而不是在我调整屏幕大小之后播放
需要任何帮助
最佳答案
我认为唯一的办法就是用不同的名字定义同一个动画两次。实际上,您使用的动画是相同的,因此媒体查询不会再次触发它。
.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>
关于html - 媒体查询后不触发CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56208204/