CSSツール/CSSアニメーションビルダー
CSSアニメーションビルダー
インタラクティブなタイムラインエディターで素晴らしいCSSキーフレームアニメーションを作成
プレビュー
Box
設定
1s
0s
プリセット
タイムライン
キーフレーム位置 0%
キーフレーム位置 50%
キーフレーム位置 100%
CSSコード
Loading...CSS Animation Guide
Learn how to create engaging CSS animations
What is CSS Animation?
CSS animations allow you to animate transitions between CSS styles. Unlike transitions, animations can have multiple keyframes that define intermediate steps, giving you complete control over the animation sequence. Animations can run automatically, loop infinitely, and be controlled with JavaScript.
How to Use This Tool
- Configure animation settings like duration, timing, and iteration
- Add keyframes to define animation states at different points
- Adjust properties like opacity, scale, rotation at each keyframe
- Preview the animation and copy the generated CSS code
Pro Tips
- Use the 'alternate' direction for smooth back-and-forth animations
- Combine transforms (scale, rotate, translate) for complex effects
- Use 'forwards' fill mode to keep the final state after animation ends
Browser Support
CSS animations are fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The @keyframes rule and animation properties have excellent cross-browser compatibility.
よくある質問
CSSアニメーションとトランジションの違いは何ですか？
トランジションは2つの状態間の変化をアニメーション化し、hoverなどのトリガーが必要です。アニメーションは@keyframesで複数のステップを定義でき、自動開始、無限ループ、より複雑な動きが可能です。シンプルな状態変化にはトランジションを、複雑なシーケンスにはアニメーションを使用してください。
アニメーションを無限ループさせるにはどうすればよいですか？
animation-iteration-count: infiniteを使用すると、アニメーションが無限に繰り返されます。ショートハンドプロパティでは'animation: myAnimation 2s infinite;'のように使用します。directionをalternateに設定すると、滑らかに往復する効果を作成できます。
fill-modeとは何で、なぜ重要ですか？
animation-fill-modeは、アニメーションの前後にスタイルをどのように適用するかを決定します。'forwards'はアニメーション終了後に最終状態を維持し、'backwards'は遅延時間中に開始状態を適用します。'both'は両方の効果を適用します。
アニメーションのパフォーマンスを最適化するにはどうすればよいですか？
transformとopacityのみをアニメーションすると、GPUアクセラレーションが適用されパフォーマンスが向上します。width、height、top、leftなどはリフローを引き起こしパフォーマンスが低下します。will-changeプロパティでブラウザにヒントを与えることができますが、過度に使用すると逆効果になります。
JavaScriptなしでアニメーションを制御できますか？
animation-play-state: pausedを使用すると、CSSだけでアニメーションを一時停止できます。:hoverや:focus状態でこのプロパティを変更することで、ユーザーインタラクションで制御できます。より精密な制御が必要な場合は、JavaScriptのWeb Animations APIを使用してください。