[richardlazear]

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]

This reply has been reported for inappropriate content.

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

[ToxicFire]

This reply has been reported for inappropriate content.

@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]

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]

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

[richardlazear]

@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]

@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]

This reply has been reported for inappropriate content.

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]

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.

[Author]

Posts