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 条规则丢失了 from {

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

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

CSS animation keyframes break media query

css

animation

media-queries