Front-endTools

プリセット

    ease

    .25 .1 .25 1

    linear

    .25 .25 .75 .75

    ease-in

    .42 0 1 1

    ease-out

    0 0 .58 1

    ease-in-out

    .42 0 .58 1

cubic-bezier

    easeInSine

    .47 0 .745 .715

    easeOutSine

    .39 .575 .565 1

    easeInOutSine

    .445 .05 .55 .95

    easeInQuad

    .55 .085 .68 .53

    easeOutQuad

    .25 .46 .45 .94

    easeInOutQuad

    .455 .03 .515 .955

    easeInCubic

    .55 .055 .675 .19

    easeOutCubic

    .215 .61 .355 1

    easeInOutCubic

    .645 .045 .355 1

    easeInQuart

    .895 .03 .685 .22

    easeOutQuart

    .165 .84 .44 1

    easeInOutQuart

    .77 0 .175 1

    easeInQuint

    .755 .05 .855 .06

    easeOutQuint

    .23 1 .32 1

    easeInOutQuint

    .86 0 .07 1

    easeInExpo

    .95 .05 .795 .035

    easeOutExpo

    .19 1 .22 1

    easeInOutExpo

    1 0 0 1

    easeInCirc

    .6 .04 .98 .335

    easeOutCirc

    .075 .82 .165 1

    easeInOutCirc

    .785 .135 .15 .86

    easeInBack

    .6 -0.28 .735 .045

    easeOutBack

    .175 .885 .32 1.275

    easeInOutBack

    .68 -0.55 .265 1.55

custom

青い丸と赤い丸をそれぞれドラッグ&ドロップで、cubic-bezierをカスタマイズすることができます。

CSS transition ジェネレーター

簡単なアニメーションの為のtransition(トランジション)のジェネレーターです。
イージング(easing)や時間(duration)・遅延(delay)などにも対応!サンプルから選択して、編集可能です。アニメーション前後のスタイルを細かく設定できるので、transitionのシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。

サンプル一覧(見本)。作りたいもののイメージに一番近いものを選択して下さい。選択後に編集することが可能です。

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。

のその他のサンプル

  • transition
    fade-in
    もっと見る
  • transition
    zoom-in
    もっと見る
  • transition
    rotate-in
    もっと見る
  • transition
    flip-in-X
    もっと見る
  • transition
    flip-in-Y
    もっと見る
  • transition
  • transition
1

タイムライン

  • NaNs
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
  • -Infinitys
No.
    0s

    プレビューの逆再生時のアニメーションは実際のtransitionの戻る際の挙動ではなく、順再生時の巻き戻し再生ですので、ご注意ください

    ツールを使用するにあたっての注意

    • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
    • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
    • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

    エディター

    ジェネレーターの一覧

    その他ツールの一覧

    フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

    • フリーランスとして生きていきたい。
    • HTML / CSSの書き方が分からない・不安がある
    • きちんと会社のホームページやブログを作ってみたい!
    • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
    • 好きな時間に好きな場所で仕事出来るようになりたい!
    • しっかり技術を身につけて、収入を上げたい。
    • 簡単に効率的にホームページを作れる方法やツールが知りたい!
    • 全くの初心者なので、プロからしっかりと学んでみたい
    • 外注すると高いので、自分で身に付けたい

    こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
    是非一度ご相談ください。

    各CSSプロパティの説明

    transition

    transitionプロパティは、CSSで指定できるアニメーションの1つです。ある2点間(始点と終点)の間をアニメーションさせることができます。自動再生やループの機能はありません。

    transitionは以下の指定をおこなうことができます。

    • transition-property:transitionを適用するプロパティの指定。初期値はallで全てのプロパティ
    • transition-duration:アニメーションが始まってから終わるまでの時間
    • transition-timing-function:transitionの速度変化。初期値はeaseで、最初と最後が少しゆっくり。
    • transition-delay:アニメーションし始める前の時間。初期値は0s

    また、ショートハンドプロパティとしてtransitionを指定することができ以下のように記述することが可能です。
    記述例)transition: 1s ease-out transform .2s
    基本的に順不同ですが、時間の指定を2つ書いた場合(記述例で言うと1sと.2s)先に書いたほうがtransition-duration、2つ目に書いたほうがtransition-delayとなります。

    transitionの発火(アニメーションし始めるタイミング)はhover擬似クラスや、JSなどによるクラスの付け替えなどがよく使われます。