How to define screen media queries inside animation's @keyframe block in SASS?

Asked Nov 05 '22 at 19:47

Active Nov 05 '22 at 19:47

Viewed 36 times

Is there a way to define screen media queries inside animation's @keyframe block in SASS? I mean like this sample (doesn't work):

@keyframes anim {
  0% {
    background: #512da8;
  }
  50% {
    background: #512da8;
    top: 26px;
  }
  100% {
    background: #311b92;
    width: 100%;

    @media(max-width: 1000px) {
        height: 250px;        
    } 

    // @include media(max-width: 1000px) {
    //     height: 50px;
    // }

    border-radius: 0px;
    top: 26px;
  }
}

I am investigating a way written like above, not written like this solution: https://stackoverflow.com/a/29224702/12698480

asked Nov 05 '22 at 19:47

Anthon Santhez

3

Nope. There isn't. – roberrrt-s Nov 05 '22 at 19:49
@roberrrt-s thank your robert. Maybe someone finds a less code way later on – Anthon Santhez Nov 05 '22 at 19:51
Keyframes can't contain media queries. You'll need to use media queries to define different variants of the keyframes. – Sean Nov 05 '22 at 20:07
1

You need to create your media query, then add your keyframes to that. Write your keyframe in the file, then address it in whatever code you add to your media query – Brad Nov 06 '22 at 12:57

How to define screen media queries inside animation's @keyframe block in SASS?

0 Answers0