Softonic

CSSスピナーアニメーション ジェネレーター

ステップ 1 / 2
次へ

CSSスピナーのアニメーションは、@keyframesルールによって永遠に回転する輪です。ここでは回転の速さを設定し、動きをプレビューして、クラスと@keyframesブロックの両方をコピーします。

アニメーションを調整する方法

  1. 1

    速度を入力する

    速度（s）の欄に、1回転にかける秒数を入力します。例えば0.8や1.2です。

  2. 2

    プレビューを確認する

    輪がすぐにその速度で回転するので、落ち着いた印象か、急かす印象かを確認できます。

  3. 3

    サイズと色を調整する

    使う場所に合うように、サイズ、太さ、色を変更します。

  4. 4

    CSSをコピーする

    生成されたルールをコピーします。アニメーションの行と@keyframesは一緒に働きます。

アニメーションの仕組み

生成されるCSSは、対になって働く2つの部分からできています。.loader の animation プロパティは、アニメーションの名前を指定し、長さとタイミング関数を設定して、繰り返しを指定します。

animation: spin 0.8s linear infinite;

@keyframes spin ルールは動きそのものを記述します。終了状態は1つだけで、360度の回転です。ブラウザは要素の通常の位置から開始し、その終了状態へ補間していきます。

@keyframes spin {
  to { transform: rotate(360deg); }
}

ツールの速度欄は、この長さの値になります。linear や infinite を含むそれ以外の部分は変わりません。

長さの選び方

1回転にかかる秒数 印象
0.4〜0.6 速くて忙しそう。落ち着きがなく見えることもある
0.8〜1 安定していて、一般的な選択
1.2〜1.6 落ち着いていて、大きなスピナーに合う
2以上 遅く、止まっているように見えることもある

大きな輪は、小さな輪より少しゆっくり回すと良いことがあります。大きな円の縁は、1秒あたりに進む距離が長くなるためです。

直線的なタイミングを使う理由

ツールは linear を使い、輪が一周の間ずっと同じ角速度を保つようにしています。ease-in-out などのイージング曲線では、輪が回転のたびに減速と加速を繰り返すため、終わりのないループではカクついて見えます。それでもその効果が欲しい場合は、貼り付けたCSSの linear を変更してください。

注意すべき制限

  • 速度を0にすると長さがゼロのアニメーションになり、輪は目に見えて回転しません。0より大きい値を使ってください。
  • スピナーは常に時計回りに回ります。逆回転にするには、コピー後に終了時の回転を -360deg に変更します。
  • 動きは1つの連続した回転です。拍動、跳ね返り、複数段階の動きには、手書きで追加の@keyframesが必要です。

アニメーションの一時停止と制御

CSSをページに追加した後は、標準的なプロパティでアニメーションを制御できます。animation-play-state: paused; を設定すると、輪はその位置で止まります。作業は終わったが要素は表示したままにする状態に便利です。animation-delay: 0.2s; を設定すると開始を遅らせられるため、待ち時間が一瞬で終わらない場合にだけスピナーが表示されます。これらはコピー後に .loader ルールへ追加する、通常のCSSプロパティです。

よくある質問

速度（s）の欄の数字を小さくしてください。0.6なら1回転に0.6秒かかるので、1のときより速く回ります。

アニメーションを終わりなく繰り返します。3のような数字に置き換えると、輪は3回転した後に止まります。

はい。名前は2か所で変更してください。クラス内の animation: の後と、@keyframes の後です。両方が完全に一致している必要があります。

ブラウザはページのレイアウトを再計算せずに transform をアニメーションできるため、要素を動かす軽い方法です。一般的に、性能の低い端末でも滑らかに動きます。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

JSONからPythonデータクラスへの変換

JSONから、型ヒント、オプションフィールド、ネストされたクラス、およびdataclasses-jsonまたはPydanticサポートを備えたPythonデータクラスを生成します。

このツールは他の言語でも利用できます

使い方ガイドと活用例