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

shoudl be

@-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动画关键帧打破媒体查询

1 个答案: