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.
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.