Loading ...
Sorry, an error occurred while loading the content.

Porting "discrete animation of display" from SVG to CSS3 animation

Expand Messages
  • Raks A
    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
    Message 1 of 1 , Oct 22, 2011
    • 0 Attachment
      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]
    Your message has been successfully submitted and would be delivered to recipients shortly.