これは何
CSS だけを使って説明動画を作ってみたよ。というかできてしまった。
デザイナーに優しい JS フリーな説明動画
JS を使わず、HTML も最小限だけにして、CSS である程度見栄えのするドーナツグラフを作ってみたんだけど、その説明動画もその流れで作っていたら、結局 JS を使わず、HTML も変更なしでできてしまった、という。
See the Pen Instruction Movie with pure CSS; Donut Chart as an Example by Takeyuki Kojima (@unau-takeyuki) on CodePen.
Chrome 69 でしか試してないので、他のブラウザでどうなるのかはわかりません。ドーナツグラフだけなら、ベンダープレフィックスを適宜追加するなどして、多くの環境できちんと動くと思います。説明動画の方は、animation の keyframes の中で content 属性を使っている (W3C の仕様では対象外) ので、動く環境は少ないかもです。
「JS はどうも ...」というデザイナーに優しく、GPU がうまくやってるくれるかもしれない CSS animation だけ使っているので CPU にも優しい説明動画をお探しの方はどぞ。