Question

我正在尝试执行以下操作...

@keyframes gone_then_appear {
    0% {
        opacity: 0.25;
        width: 385px;
    }
    5%{
        width: 0px;
    }
    25% {
        opacity: 0;
        width: 155px
    }

    100% {
        opacity: 1;
        width: 385px;
    }
}


@media (max-width: 900px) {
    #submit {
        animation: gone_then_appear 0.5s;
    }
}

当用户缩小屏幕并且窗口达到900px时，会调用动画，这就是我想要的。但是，我希望在用户将窗口增加到900px时再次调用动画。

我尝试了以下但是它没有正常工作......

@media (max-width: 900px) {
    #submit {
        animation: gone_then_appear 0.5s;
    }
}

@media (min-width: 900px) {
    #submit {
        animation: gone_then_appear 0.5s;
    }
}

我希望每次窗口为900px时调用动画，但只使用CSS。这可能吗？

Answer 1

使用2个动画

fiddle demo

div {
  background: red;
  padding: 20px;
}

@keyframes gone_then_appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gone_then_appear2 {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


@media (max-width: 900px) {
  div {
    animation: gone_then_appear2 1.5s;
  }
}

@media (min-width: 900px) {
  div {
    animation: gone_then_appear 1.5s;
  }
}

<div></div>

根据评论进行更新

这只以900px开始

fiddle demo

div {
  background: red;
  padding: 20px;
}

@keyframes gone_then_appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 900px) and (min-width: 900px) {
  div {
    animation: gone_then_appear 1.5s;
  }
}

<div></div>

如何使用媒体查询调用动画两次

1 个答案: