Kelly Kelly - 6 months ago 27
CSS Question

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?

Answer

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