Search code examples
cssanimationmedia-queries

CSS animation keyframes break media query

While working on a page (in magento) I noticed that my animation keyframes that I placed directly above my media query, break the media query. When I switch them around it all works fine.

Why does this happen? Did I not correctly close my keyframes? I can't spot the mistake, am I doing something wrong or is this a known problem?

Bottom part of my 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;}  }

This works. But when the keyframes are placed above the media query, the media query does not function. Why?

Solution

  • You might have pasted some code incorrectly

    notice that your last 2 css rules are missing 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;}  }