CSSカウントダウンアニメーション：数字とリングタイマー
ホーム CSSカウントダウンアニメーション
CSSカウントダウンアニメーション：CSSで作る3-2-1の数字とリングタイマー
@property、カウンター、stroke-dashoffsetを使い、CSSだけで3-2-1の数字カウントダウンと縮んでいくリングタイマーを作りましょう。自分用のものを生成して、その場でプレビューできます。
CSSだけのカウントダウンは、登録済みの整数カスタムプロパティを開始の数字から0までアニメーションさせ、カウンターで表示します。--nを@propertyで整数として登録し、1秒に1回刻むようsteps()でアニメーションさせ、counter-reset: n var(--n)とcontent: counter(n)で表示します。リングにはstroke-dashoffsetのアニメーションを加えます。
CSSだけのカウントダウンを構成する部品
型付きの変数 @property --n { syntax: "<integer>" } ブラウザーが数値をアニメーションできるようにする 刻み animation: count 3s steps(3) forwards 1秒に1回ジャンプし、最後の値を保持する 出力 counter-reset: n var(--n) 変数をカウンターに変える 表示 ::after { content: counter(n) } 現在の数字を描く リング stroke-dashoffset: 0 to circumference 同じ時間で円を空にしていく スプラッシュ画面のカウントダウン、クイズのタイマー、ローンチの瞬間には、スクリプトは必要ありません。このページでは、CSSだけで3-2-1の数字カウントダウンとリング型のカウントダウンを作り、開始の数字と速さを指定して自分用のものを生成でき、古いブラウザー向けの代替も紹介します。カレンダーの日付までのカウントダウンには、当サイトのカウントダウンタイマー生成ツールを使ってください。
ジェネレーターで開始の数字と1ステップあたりの秒数を選びます。 数字のスタイル、リングのスタイル、またはその両方を選び、もう一度見るにはリプレイを押します。 HTMLとCSSをコピーします。JavaScriptはまったく使わずに動きます。 @propertyに対応していないブラウザーもサポートする必要があるなら、代替のセクションを読んでください。 nを開始の数字と同じにしてsteps(n)を使うと、1秒ごとに1つの整数が表示されます。 アニメーションにforwardsを付けると、終了後も最後の値が残ります。 リングの動きは動きを減らす設定のクエリで囲みますが、情報を伝えている数字は残しましょう。 CSSのカウントダウンは、終了時に何かを発動させることはできません。0になったときに何かを起こす必要があるなら、JavaScriptでanimationendイベントを監視しましょう。 よくある質問
カウントダウンがいきなり0に飛ぶのはなぜですか？
カスタムプロパティが登録されていないからです。登録されていないカスタムプロパティは補間できないので、ブラウザーは最初の値から最後の値へ一気に切り替えます。syntax "<integer>"、inherits、initial-valueを指定した@propertyルールを追加しましょう。
@propertyに対応しているブラウザーは？
MDNでは@propertyはBaseline 2024とされ、2024年7月から現行のブラウザーすべてで新たに利用可能になりました。古いブラウザーでは数字が刻まれないため、このページでは数字を積み重ねる代替を紹介しています。
カウントダウンの最後に「Go」と表示するには？
その単語を入れた2つ目の要素を追加し、opacity 0から始めて、カウントダウンの長さと同じanimation-delayでフェードインするアニメーションを付けます。同じタイミングで数字を隠しましょう。
これは日付までのカウントダウンと同じですか？
違います。日付までのカウントダウンには現在時刻が必要で、CSSでは読み取れないためJavaScriptが必要です。その種類は当サイトのカウントダウンタイマー生成ツールで作れます。このページは3-2-1のような短い固定のカウントダウン向けです。
カウンターの技が機能する理由
--nを整数として登録すると型が付くので、3から0へのキーフレームは突然の切り替えではなく、途中の整数を生み出します。counter-resetはvar()を通じてその整数を受け取り、counter()が疑似要素の中でそれをテキストに変えます。 steps(3)は3秒のアニメーションを3つの等しいジャンプに分けます。これがないと同じ数字は出ますが、タイミングがイージング曲線に従うため、刻みが不揃いに感じられます。 リングを描く
SVGの円の輪郭は、円周、つまり2×π×半径と同じ長さの1本の破線として描けます。stroke-dashoffsetを0からその長さまで動かすと破線が見えないところへずれていき、リングがなめらかに空になります。 リングが上から空になり始めるようSVGをマイナス90度回転させ、端をやわらかくするためにstroke-linecap: roundを指定しましょう。 3-2-1の数字カウントダウン
@propertyとカウンターで刻む数字
コードを編集すると再実行されます。数字は1秒に1つずつ減り、0で止まります。
リング型カウントダウン
空になっていくリングの中の数字
リングはSVGの円のstroke-dashoffsetを使い、動きを減らす設定が求められると動きを止めます。
@propertyを使わない代替
animation-delayで数字を積み重ねる
それぞれの数字が独立した要素で、順番に1秒ずつ表示されます。CSSアニメーションに対応したどのブラウザーでも動きます。
カウントダウンジェネレーター
開始の数字：{n}
1ステップの秒数：{n}
カウントダウンのスタイル
数字のみ
数字とリング
リプレイ
カウントダウンのプレビュー
コードをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る