hey all,

I have been working on figuring out css3 animations and have come up with a couple of test pages.


http://sandyfeldman.com/tests/animation/css3animation.html

http://jigsaw.w3.org/css-validator/validator
turns up 80 errors on the css, all connected to
@-moz-keyframes and -moz-animation
is there a way to get the animations and have the css validate? Should I be rewriting this?

Other things that don't work the way I would like:

I added
-moz-box-sizing: border-box;
to 7 and 9 to keep the animated effects on the box borders from bulging out the boxes.

When I mouseover it *almost* works, but there is a shift in the width just towards the end of the animation - just a brief bulge. I can't figure out where that's coming from or how to get rid of it.

Another especially weird thing - locally all the boxes are one size, when I upload the page to the server, without changing anything, they are a bit narrower. Any idea of what's going on?

On 18 there is a little extra white border on the top of the box - looks like one more pixel. I have no idea where that's coming from. Any thoughts?

Also, in 23 - the image expands on mouseover, which is hunky dory, but it also degrades. What I would like is to have the 300px image shrink down to 150px and then show its full-sized self on mouseover. This would take a different approach but I can't think what it might be.


http://sandyfeldman.com/tests/animation/tires.html
a possible candidate for "Inappropriate uses of CSS3"

here's the question - is there a way of timing the effects - so animation 2 starts a 2 second delay after animation 1?

thanks!

Sandy

______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to