CSS-анимация ключевых кадров прерывает медиа-запрос

Question

При работе на странице (в пурпуре) я заметил, что мои ключевые ключевые слова анимации, которые я разместил непосредственно над моим медиа-запросом, нарушают медиа-запрос. Когда я переключаю их вокруг, все работает нормально.

Почему это происходит? Не правильно ли я закрыл свои ключевые кадры? Я не могу заметить ошибку, я что-то делаю неправильно или это известная проблема?

Нижняя часть моего 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 будет

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