このツールについて
フェード、スライド、ズーム、パルス、バウンス、シェイク、回転など 9 種類からひとつを選び、再生時間、遅延、回数、timing function、再生方向、fill mode を調整するとプレビューが即座に再生されます。出力には `@keyframes` ブロックと対応する animation プロパティの両方が含まれるため、スタイルシートに貼り付けるだけで動作し、アニメーションライブラリは必要ありません。
CSS / FRONTEND · ブラウザ内で処理
CSS アニメーション生成
効果を選んで時間や回数を調整し、keyframes と animation を出力。
9 種類の keyframes を用意。出力には完全な @keyframes ブロックが含まれ、ライブラリは不要です。
Tooloo
@keyframes tooloo-slide-in-up {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}
.animated-element {
animation-name: tooloo-slide-in-up;
animation-duration: 0.8s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-direction: normal;
animation-fill-mode: both;
}@media (prefers-reduced-motion: reduce) 内で animation を none に設定してください。
アニメーション効果
タイミング
操作手順
- アニメーションの種類を選びます。
- 再生時間・遅延・回数を設定し、timing function を選びます。
- @keyframes を含む完全な CSS をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- animation-fill-mode はどれを選ぶべきですか。
- forwards は最終フレームを保持するため、フェードインして画面に残る要素に適します。backwards は遅延中に最初のフレームを適用します。both は両方を行い、登場アニメーションで最もよく使われます。none では前後とも元のスタイルに戻ります。
- 動きを減らす設定に配慮するには。
- `@media (prefers-reduced-motion: reduce)` の中で `animation: none` を指定すれば、動きに敏感な利用者にはアニメーションが再生されません。アクセシビリティの基本要件であり、すべてのアニメーションに追加することを推奨します。