How to add media query for css @keyframes animation

Bootstrap Studio Help
1

I am trying to add some animation to my project using css @keyframes, I need to tweak some other css properties like margin for this animation at different keyframe positions on different breakpoints. Something like this:

@media screen and (min-width: 300px) {
    @keyframes show{
    css rules...
    }
 }

Bootstrap Studio is not giving me option to add media query before @keyframe. Even when I try to import a external css file with the above syntax, it does not recognize the media query. All breakpoints defined like @media screen and (min-width:300px) for @keyframes are not displayed or are gone. Here is what Bootstrap Studio shows:

@keyframes show{
css rules...   
}

How can I add media query for @keyframes?

2

Currently in Bootstrap Studio in a regular css stylesheet you cannot nest a @keyframe in a media query. I wont get into the debate about the current CSS spec supporting it now (I think) but you could try this instead.

@media(max-height:500px) 
{
    #selectorGroup {
        animation: slideUp500 1s forwards;
    }
}

@media(max-height:750px) 
{
    #selectorGroup {
        animation: slideUp750 1s forwards;
    }
}


@keyframes slideUp500 {
    0%    { transform: translate3d(0,500px,0); }
    100%  { transform: translate3d(0,0,0); }
}

@keyframes slideUp750 {
    0%    { transform: translate3d(0,750px,0); }
    100%  { transform: translate3d(0,0,0); }
}
3

Thank you @Twinstream for your guidance. That was perfectly what I was trying do.

4

Good tip to know @Twinstream. Thanks for this post.