Wondering why my animation keyframes placed above the media query in a Magento page seem to break the formatting. However, when I rearrange them, everything works perfectly.
Could it be a closing keyframes issue? Can't seem to locate any mistakes, so is this an error on my end or a common problem?
Here's the 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;} }
Functionality is intact. However, placing the keyframes above the media query disrupts its operation. Curious as to why this occurs.