数字・グラフを見せる
カウントアップCount up
数字が0から数え上がって、決まった値で止まる。
AIへの指示例上の調整が入ります
スライド用（PowerPoint・Canva を操作するAIに）「1,280件」の数字は、0から数え上げて止まる動き（カウントアップ）にしてください。長さは1.5秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）数字を0から1,280まで1.5秒で数え上げてください（カウントアップ）。速さの変わり方はイーズアウト（ease-out）。止まったあとは最後の数字を表示したままにします。
細かい指定動画を作る人・細かく指示したい人向け
- 長さ
- 1.5秒
- 数える範囲
- 0 → 1,280
- 速さの変わり方
- イーズアウト（ease-out）
- 曲線の数値
- cubic-bezier(0, 0, 0.58, 1)
- 止まったあと
- 最後の数字のまま
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。
<p class="fb-count-up"></p>
<style>
/* 数字を数え上げるための入れ物（いまの主なブラウザで使える書き方） */
@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
.fb-count-up {
--num: 1280; /* 止まったときの数字。動かさない人にもこの数字が出る */
counter-reset: num var(--num);
animation: fb-count-up 1.5s ease-out both;
}
/* counter() はカンマを付けないので「1280件」と出る。カンマが要るときは JavaScript で数字を書き換える */
.fb-count-up::after { content: counter(num) "件"; }
@keyframes fb-count-up {
from { --num: 0; }
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-count-up { animation: none; transition: none; }
}
</style>
- どう動くか
- 数字が0から目標の値まで増えていき、そこで止まります。数字の大きさを、増えていく時間で感じてもらえます。
- 使う場面
- 実績の数字、利用者数、達成率。結論の大きな数字を印象づけたいとき。
- やりすぎに注意
- 小さな数字や細かい数字には向きません。止まったあとの数字が読めることが大事なので、長くしすぎないでください。
