CSSアニメーション生成ツール
アニメーションのプロパティを設定してライブプレビューを確認し、CSSコードを生成します。
ライブプレビュー
生成されたCSS
@keyframes toolbox-move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
.animated-box {
animation-name: toolbox-move;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0s;
animation-fill-mode: none;
}使い方
1. 各プロパティ（duration・timing・iteration・direction など）を設定します。
2. ライブプレビューでボックスのアニメーションをリアルタイム確認できます。
3. 「コピー」ボタンで生成されたCSSコードをクリップボードにコピーします。
生成されたコードは @keyframes と .animated-box のセットで構成されています。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます