Imbrication des mediaqueries / animations CSS 3 (keyframes)

Bonjour à tous,

Je souhaiterai insérer des animations CSS3 dans mes pages CSS. Ma problématique est la suivante:
J'ai des pages CSS propres à chaque résolution d'écran, j'utilise pour se faire des mediaqueries pour chacunes des résolutions traitées. Or, je dois insérer des animations CSS3 dans ces différentes pages CSS.

Exemple

@media screen and (min-width:1121px) and (max-width:1440px) {

@keyframes bounce {
from {right:85px; top:27px;}
to {right:85px; top:35px;}
}

.Btn_Hotline {[/b]
display:inline-block;
position:absolute;
width:73px;
height:21px;
border:0;
background-image:url(../Images/Btn_Hotline.png);
background-repeat:no-repeat;
background-size: 73px 21px;

animation: bounce 0.55s ease infinite alternate;
}

[b].Btn_Hotline:hover {
background-image:url(../Images/Btn_Hotline_Hover.png);
background-repeat:no-repeat;
background-size: 73px 21px;

animation: bounce 0.55s ease infinite alternate;
cursor: pointer;
}

}



Ce code indique une erreur ce qui me laisse présager que nous ne pouvons imbriquer un mediaquery dans un autre. Ainsi, quelles solutions pour insérer des animations différentes selon la résolution de l'écran ?[/b]
Modifié par Marcotest (22 Dec 2015 - 09:46)