CSS animated media queries

Question

I tried some CSS3 heavy stuff here, and I am facing some issues that I hope can be fixed:

1 - I have a box that appears when you load the page. Let them talk:

#box { animation-duration: 3.5s; animation-name: slidein; } @keyframes slidein { from { top: 0; } to { top: 100%; }} 

However, in my media query, due to some resizing, I need to change this:

 @media only screen and (min-width: 768px) { @keyframes slidein { from { top: 0; } to { top: 80%; }} } 

I thought I could keep the animation name the same and just override the keyframes inside one of the @media requests, however this doesn't seem to work. What for? (Yes, I have the appropriate prefixes set)

2 - My solution for the above is to define different animations for each size:

 #box { animation-duration: 3.5s; animation-name: slidein; } @keyframes slidein { from { top: 0; } to { top: 100%; }} @keyframes slidein-low { from { top: 0; } to { top: 80%; }} @media only screen and (min-width: 768px) { #box { animation-name: slidein-low; } } 

However, NOW when resizing the site, the animation will start as soon as it hits one of the media queries. I want the animation to play once (no matter what size it can be, and even after resizing), and that it. Therefore, if there is no solution for # 1, I believe that this is due to the fact that when a request is detected, it kind of “re-initiates” CSS for it?

Answer 1

I assume you are making a minimum width for smaller screens that can have a maximum width of 1024? So maybe try also adding this:

 @media only screen and (min-width: 768px) and (max-width:1024px) { #box { animation-name: slidein-low; } } 

Perhaps even try adding an animation construct to the query:

 @media only screen and (min-width: 768px) and (max-width:1024px) { @keyframes slidein-low { from { top: 0; } to { top: 80%; }} #box { animation-name: slidein-low; } } 

I'm sure you came across this site, but just in case you do not have a good link for media queries:

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

Answer 2

From my experiments, I found that Safari 5 (for desktop and iOS) will certainly display your page the way you are going to use one of your solutions. Firefox 9, on the other hand, does not seem to respect the @ -moz-keyframe or -moz-animation rules if they are placed in @media blocks (and both ignore the W3C @keyframe animation properties and are not vendor specific)