Sphere
Stacking

アニメーション生成

CSS/SVGアニメーションを視覚的に作成・カスタマイズできます。

アニメーションタイプ

アニメーション選択

アニメーション設定

プレビュー

CSSコード

/* アニメーション定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 使用例 */
.animated-element {
  animation: fadeIn 1000ms ease 1;
}

/* 個別プロパティ版 */
.animated-element {
  animation-name: fadeIn;
  animation-duration: 1000ms;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

JavaScript版

// Web Animations API
element.animate([
  { opacity: 0 },
  { opacity: 1 }
], {
  duration: 1000,
  easing: 'ease',
  iterations: 1,
});

アニメーションについて

パフォーマンスのヒント

  • transform と opacity のアニメーションが最も高速
  • will-change プロパティで事前に最適化可能
  • 大量の要素には CSS より JavaScript の方が効率的
  • GPU アクセラレーションを活用する

ブラウザ対応

  • CSS アニメーション: 全モダンブラウザ対応
  • Web Animations API: Chrome, Firefox, Safari 対応
  • SVG アニメーション: 全モダンブラウザ対応
  • ベンダープレフィックスは自動付与を推奨