CSSシークレット ―47のテクニックでCSSを自在に操る

アニメーションを一時停止の状態にしておけば、animation‐delayで

指定された経過時間のフレームが表示され続けます。円グラフ上でのパー

センテージは、アニメーション全体に対する遅延の値の割合として表され

ます。例えばアニメーション全体が6 秒間だとすると、20％の表示のため

には（6 秒間の 20 ％は1.2秒なので）遅延としてマイナス1.2秒を指定しま

す。計算を簡単にするために、アニメーション全体の時間は 100 秒とする

のがよいでしょう。アニメーションはずっと停止したままなので、全体の

時間は何秒でもかまいません。

最後に、アニメーションは擬似要素に対して実行されるけれどもインラ

インのスタイルは .pieの要素に指定することを思い出しましょう。この

div要素ではアニメーションは行われないため、この要素にインラインで

animation‐delayを 指 定 し 、 擬 似 要 素 で は animation‐delay:

inherit;と指定して親要素での設定を引き継ぐようにします。つまり、

20％と 60 ％の円グラフを生成するためのマークアップは次のようになり

ます。

そしてCSSは以下のとおりです。 .pie用のルールは、以前と同じため

省略します。



<divclass="pie"

style="animation‐delay:‐20s"></div>

<divclass="pie"

style="animation‐delay:‐60s"><