Defining Keyframe Animations Inside Media Queries

How to define keyframe in media query?

You're simply missing the and in your media query:

@media screen and (max-width: 800px)

Here it is working. You can see in the preview pane when you run the snippet, it animates up and down as indicated in the keyframes defined in the media query. To see it working when the width exceeds 800px, click "full screen."

.my_test{ width:50px; height: 50px; background:red; display: inline-block; -webkit-animation: aaa 0.5s infinite; -o-animation: aaa 0.5s infinite; animation: aaa 0.5s infinite; position: relative;}
@-webkit-keyframes aaa { from { left:0px; } to { left:50px; }}@-o-keyframes aaa { from { left:0px; } to { left:50px; }}@-moz-keyframes aaa { from { left:0px; } to { left:50px; }}@keyframes aaa { from { left:0px; } to { left:50px; }}
@media screen and (max-width: 800px) {  @-webkit-keyframes aaa {  from { top:0px; }  to { top:50px; } } @-o-keyframes aaa {  from { top:0px; }  to { top:50px; } } @-moz-keyframes aaa {  from { top:0px; }  to { top:50px; } } @keyframes aaa {  from { top:0px; }  to { top:50px; } }}

<div class="my_test"></div>

Nesting @keyframe in @media

According to the W3C specification:

At-rules inside @media are invalid in CSS2.1.

ref: www.w3.org - Media types

So this won't work:

@media (max-width: 768px) {

   @media (max-width: 450px) {

   }

}

Neither will this:

@media (max-width: 768px) {

   @-webkit-keyframes animation {

   }

}

Keyframe animations should be declared outside of any media types then applied within the applicable or relevant media quieres when and where necessary.

How to implement CSS animations based on media-query breakpoints being hit?

After a lot of experimentation, I've finally sussed it out. Essentially, as Lars pointed out, I'd forgotten to delete a couple of bits; but the solution I ended up with (which seems a bit smoother, as it fades one image into the other) is to have the base CSS as:

#franklin {
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
}

Then the mixin to apply the animation as follows:

@mixin SwapLogo($img, $width, $startIMG, $startWidth, $animationName) {
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: $animationName;
    background-image: $img;
    width: $width;

    @keyframes #{$animationName} {
        0% {
            width: $startWidth;
            background-image: $startIMG;
        }

        100% {
            background-image: $img;
            width: $width;
        }
    }
}

With the media queries being:

@media screen and (max-width: calc($bigToSmallFISLogo + 10px)) { //This overlap of 10px basically allows for the animation to take effect as the other animation is removed. 
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/fissmall.png'), 7%, url('../../../../PageAssets/Fis.png'), 100%, LogoGoSmall);
        margin-top: 13px;
    }
}

@media screen and (min-width: $bigToSmallFISLogo) {
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/Fis.png'), 100%, url('../../../../PageAssets/fissmall.png'), 7%, LogoGoBig);
    }
}

@media screen and (max-width: $minSizeForDesktopMenu) and (min-width: $bigToSmallFISLogo) {
    #franklin {
        margin-top: 26px;
    }
}

@media screen and (min-width: $minSizeForDesktopMenu) {
    #franklin {
        margin-top: 13px;
    }
}

CSS animation keyframes break media query

You might have pasted some code incorrectly

notice that your last 2 css rules are missing 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 be

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

css animation not triggering after media query

I think the only way is to define the same animation twice under different names. Actually the animation you are using is the same so the media query will not trigger it again.

.box {  background:red;
  animation:fromLeft 2s linear forwards;}
@media all and (max-width:600px) {.box {  background:blue;  display:block;  animation:fromLeft-alt 2s linear forwards;
}
}
@keyframes fromLeft {   from {     transform:translateX(-100%);   }}@keyframes fromLeft-alt {   from {     transform:translateX(-100%);   }}

<div class="box">  some content</div>

CSS Animation not working when use Media Queries in IE

The problem is that IE doesn't like it when keyframes are defined within mediaqueries. If you pull the definition for the keyframes outside the mediaquery it works. (Tested in IE11)

@keyframes timebar {
    0% { width: 0%; }
    99% { width: 100%; }
    100% { width: 0%; }
}

@media(min-width: 300px){  
    .block-bar {
        height: 50px; background-color: red;
        -webkit-animation: timebar 1s infinite;
        -moz-animation: timebar 1s infinite;
        animation: timebar 1s infinite;
    }

    @-webkit-keyframes timebar {
        0% { width: 0%; }
        99% { width: 100%; }
        100% { width: 0; }
    }
}