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

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

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

我尝试了以下方法，但效果不佳...

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

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

我希望每次 window 为 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>

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

How to call animation twice using media query

css

keyframe

media-queries