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/
