CSS 动画关键帧中断媒体查询

Question

在处理页面(在 magento 中)时，我注意到我直接放置在媒体查询上方的动画关键帧破坏了媒体查询。当我切换它们时，一切正常。

为什么会这样？我没有正确关闭关键帧吗？我无法发现错误，是我做错了什么还是这是一个已知问题？

我的 CSS 的底部:

    .shop:hover .imagesub {
    transition: 1s;
    max-height:80px;
}

.tooltip img:hover {
-webkit-animation: 0.5s linear 0s infinite alternate bounce;
     -moz-animation: 0.5s linear 0s infinite alternate bounce;
       -o-animation: 0.5s linear 0s infinite alternate bounce;
          animation: 0.5s linear 0s infinite alternate bounce;
}


@media only screen and (max-width: 1000px) { 
    .infobar {
        background-color: aqua;
    }
    .lefthalf {
        width:100%;
      }
    .righthalf {
        width:100%;
        float:left;
        }
    .shoprow {
        width:100%;
        height:auto;
        }
    .shop {
        width:99%;
        float:left;
        margin-bottom:14px;
    }
    .shop img {
        width:100%;
        height:auto;
        }
    .shopcontainer {
        height:auto;
        }
    .imagetitle {
        left:0px;
        width:100%; }
    .imagesub {
        display:none;
        }
}

@-webkit-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
   @-moz-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
     @-o-keyframes bounce { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
        @keyframes bounce { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }

这行得通。 但是当关键帧放在媒体查询上方时，媒体查询不起作用。为什么？

Answer 1

您可能粘贴了一些错误的代码

请注意，您的最后 2 个 css 规则从 {

中丢失

@-webkit-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
   @-moz-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
     @-o-keyframes bounce { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
        @keyframes bounce { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }

应该是

@-webkit-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
   @-moz-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
     @-o-keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }
        @keyframes bounce { from { width:30px; height:40px; margin-left:0; } to { width:35px; height:45px; margin-left:-1px;}  }