"READY? ENGAGE!"view live
One day I got caught up in YouTube's "Related Video" vortex and watching a bunch of old matches of Japanese players. Kind of like how people sometimes go on binges of watching old basketball games ('91 Vinnie Johnson never gets old).
The animation is primarily based in CSS clipping and text strokes. To give the illusion of transperancy, the background of the text is set to the same background of the canvas and overlayed in the same dimensions. The counters of characters contain that hidden background while the outer background is simply transparent.
The "round" animation starts with a flash and clipping mask that sweeps open from the center to reveal the text. The "fight" animation scales downward into frame. There are two instances of the word fight to give the illusion of text with a stroke and image background fill. One has the same image set as the background for the text while the other is simply the stroke.
Look at the reference on the live page to compare and see something cool.