animation and stroke: css, svg and browsers: Part I: animated rotation in CSS and SVG

Hello,

 

I was interested in seeing whether I could use CSS animation to do a variety
of things that one would normally do with SVG.

 

http://cs.sru.edu/~ddailey/svg/cssSVGrotate2.htm

 

In particular, I was interested in using declarative animation across
browsers, and realizing that part of the reason for putting energy into CSS
transitions was because Microsoft had said no to SVG/SMIL. And knowing of
all the energy that has been put into that (detracting perhaps from energies
that might otherwise have gone into SVG). I figured it was time to take
another look.

 

The little tests here reveal that Firefox, Opera and Chrome all scored 4/4
on these little tests. Safari/Win received a 2.5/4 - messing up the clean
lines of the rotating HTML table, and refusing to animate the rotation of
the SVG through CSS. I should note, however that that was the first time I
ran Safari on that file. After running it on the experiments described in
Part II (my next message) my Safari seems even more displeased with these
experiments.

 

Internet Explorer 11  animated the HTML stuff just fine but did not want to
use CSS to animate  the rotation of the SVG.

 

I suppose it is worth waiting a few more years to be able to use declarative
techniques to animate graphical content across browsers? Or am I just
missing something with IE and Safari? I have been told  that Safari/Win has
been discontinued, so I suspect that Safari/Apple is much further along than
I am able to test.

 

I think it is cute, though,  that we can now animate HTML using declarative
techniques.  Too bad about the SVG part.

 

In the experiment at upper right I was interested in using the animation of
stroke-dash-offset to peel an apple, so to speak, as it rotates. I found
though that I could not extend the radial gradient into the stroke -
browsers seeming to want to keep it confined to the shape. That's the
subject of the next message: Part II.

 

Cheers

David