Hi,
I have had experience with SVG SMIL but been investigating upon CSS3
animations and trying to achieve the same thing with CSS3.
One area I am finding difficulty implementing in CSS3 is the animation on
display attribute which I am able to do pretty easily in SVG
In SVG the code is
<animate attributeName="display" keyTimes="0;0.1;0.2;0.3;0.5;0.8;1.0"
values="none;inherit;none;inherit;none;inherit;none" duration="10s" >
I tried the following CSS animation but it did not work as expected. So what
could be way to achieve the keyframe based animation on display/visibility
in CSS3
or is it a limitation on CSS3
<style type="text/css">
#layer1 {
-moz-animation-duration: 10s;
-moz-animation-name: toggle;
visibility: hidden;
}
@-moz-keyframes toggle{
0% { visibility: hidden; }
10%{ visibility: visible; }
20% { visibility: hidden; }
30%{ visibility: visible; }
50%{ visibility: hidden; }
80%{ visibility: visible; }
100%{ visibility: hidden; }
}
</style>
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
