How do I chain multiple CSS animations?

You can chain multiple CSS animations by separating them with a comma in the animation property, e.g. animation: spin 2s linear infinite, pulse 1s ease-in-out infinite;

What properties can I control per animation layer?

You can control animation-name, duration (s), timing-function, delay (s), iteration-count, and direction.

CSS Keyframe Multi-Animation Stacker

Visual CSS multi-animation builder. Chain multiple @keyframes on a single element.

Animation Layers

Stack multiple animations together.

Layer 1

Animation Name

Timing Function

Duration (s)

Delay (s)

Iteration Count

Direction

Live Preview

See your stacked animations in action.

CSS

Generated CSS

animation: spin 2s linear 0s infinite normal;

CSS Border-Radius Shape Generator

8-point fancy blob and custom CSS border-radius generator. Organic blobs, pills, badges, leaves, liv…

YAML to JSON Converter

Convert YAML to JSON and JSON to YAML online. YAML parser and converter with syntax validation and f…

Regex Tester

Test and debug regular expressions online with real-time matching. RegEx tester with syntax highligh…

CSV to JSON Converter

Convert CSV files to JSON format with automatic header detection. Transform tabular data to JSON arr…

JSON Schema Validator

Validate JSON data against a JSON Schema. Real-time validation with error paths. Preset schemas for …

Code Minifier

Minify HTML, CSS, and JavaScript code. Shows original vs minified size with savings percentage. Remo…

Toolzium