CSS3 Animation Delay Solution


I finally came up with a solution– found, I fear to add, long ago by others — to the perplexing SVG animation delay problem discussed in the last few posts.

To arrive at it, I simplified things  by getting rid of the SVG, and instead wrote a little animated “Hello, world” program — first you see “Hello, ” then you see “world.”  They both vanish at the same time, and the cycle resumes: though one might hope not so carelessly.

The issue at hand immediately became clearer,.

The problem I was having earlier is that I thought animation-delay applies to each iteration.

It doesn’t.

Instead, animation-delay specifies the delay before an animation starts — NOT the delay in between animation cycles.  In other words, it only happens once.

Also, it is important to realize that animation-delay does does not “cut in” to the duration of the animation itself.

This was another false assumption I was making.

So what is the solution?

The trick is to eliminate animation-delay entirely, and simulate delays using a keyframe rule.

(For further info, consult this.)

Let’s apply this idea to SVG.

As you can see, it works.

But it shits bricks.

Maybe I can create an SVG text element that reads as follows: “Δ8″ (as in Delta 8), then have this SVG text element perform some sort of wahoo animation that makes the logo stand out from a  branding perspective.

I could have it follow the path of the circumference of the yellow circle, and that would be interesting in terms of testing if one can create a text path on both a standard path or a built-in shape (without converting the shape to a path).

But that would an obscure technical issue, and boring does not do much for branding.

How about something like this?

Might be eye-catching to have the SVG text snippet duplicate the motion of the plane.

But instead of the scaling, it might be more fun — as a sort of visual pun — to have the circle bounce during the leaf iterations.

Kind of like this…

Hmmm, that is not really a bounce.