イージング関数とは何ですか？

アニメーションの速度変化を制御する関数です。ease（ゆっくり始まりゆっくり終わる）、linear（等速）、ease-in（ゆっくり始まる）、ease-out（ゆっくり終わる）などがあります。cubic-bezierで自由にカスタマイズも可能です。

パフォーマンスに影響しますか？

transform（移動・回転・拡大）とopacity（透明度）のアニメーションはGPUで処理されるため高速です。width/height/marginなどのアニメーションはレイアウト再計算が発生するため重くなりがちです。

デザイン・CSS無料登録不要

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。

Preview

プリセット

Duration: 1s

Delay: 0s

Timing Function

Direction

Iteration Count

Infinite

Fill Mode

CSS Output

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation: fade-in 1s ease 0s 1 normal both;
}

FAQ

transitionは要素の状態変化（hover等）をなめらかにする機能で、開始と終了の2状態間のみ対応します。animationは@keyframesで中間状態も定義でき、繰り返し再生や複雑な動きが可能です。

読み込み中...