richardlazear

# November 14, 2012 at 11:34 pm

Working on a website ([freedomknot.com](http://www.freedomknot.com “FreedomKnot”)), I came across a little issue with the IE10 Release Preview (running on Windows 7). Code for CSS animations work fine placed normally in the .css file, but when I place the animation code into a media query for a different viewport size, the animation does not play. Chrome, Opera, and Firefox do not have this issue. This is not a pressing issue, I just want to know if anybody else has come across this issue?

jamygolden

# November 15, 2012 at 3:22 am

You need to add a `-ms-` vendor prefix for IE10. http://msdn.microsoft.com/library/ie/hh673530.aspx

ToxicFire

# November 15, 2012 at 4:27 am

@jamy_za article actually states with IE10 that ya don’t need anymore and to remove it to ensure forwards compat. But it works for him outside of media query which is weird.

@richardlazear Question are you putting the entire animation inside the media query or just the code that attaches it to a specific class?

Paulie_D

# November 15, 2012 at 5:49 am

I just installed the IE10 preview on W7 64bit and everything seems to be working at all browser sizes.

Which animation/transition is not work at what viewport size?

TheDoc

# November 15, 2012 at 12:44 pm

Also keep in mind that you aren’t running the final IE10 version that was released with Windows 8.

richardlazear

# November 15, 2012 at 7:07 pm

@ToxicFire and @Paulie_D, this is what I currently have.
@media only screen and (min-width: 960px) {
.tagline {animation: tagline-load 3s ease 3.5s 1 normal forwards;}

@keyframes tagline-load {
from {text-shadow: none;}
to {text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);}
}
}

If I were to place this code outside of a media query, it works fine in IE10, but inside a media query, as shown above, does not work.

chrisburton

# November 15, 2012 at 7:50 pm

@richardlazear Not sure if this will do anything but try it.

@media only screen and (min-width: 960px) {
@-ms-viewport { width: 960px; }
/* CSS Here */
}

ToxicFire

# November 16, 2012 at 4:26 am

I have a sneaking feeling its an issue with nested @rules try moving the @keyframes {….animation….} outside of the media query but leave the .tagline {animation: tagline-load 3s ease 3.5s 1 normal forwards;} inside it.

**EDIT:**
Yuh just installed ie10 preview on a win 7 system, its the fact that the keyframes are inside the media query that borks it.

richardlazear

# November 17, 2012 at 12:13 am

Thank you so much @ToxicFire. Your suggestion works great! It’s just a little frustrating that IE10 (at least this particular version) works this way.