No need to write more CSS code for every device responsive. Just single line code to match all media devices check now

1k Color palettes published

More palettes coming soon

CSS Animation Editor

Before you enter animation editor, please confirm you are not robot

Interactive CSS Animation Tutorial

Welcome to your CSS Animation journey!

This tutorial will help you understand CSS animations step-by-step, with interactive examples you can modify and see the results instantly.

1. What are CSS Animations?

CSS animations allow you to animate changes in CSS properties over time. Instead of just having an instant change, you can make elements smoothly transition from one state to another, creating engaging visual effects.

They consist of two main parts:

@keyframes: This is where you define the animation sequence. You specify what styles an element should have at different points (percentages) during the animation.
Animation Properties: These are applied to the HTML element you want to animate, linking it to a @keyframes rule and controlling how the animation plays (e.g., duration, speed, repetition).

2. The `@keyframes` Rule

The @keyframes rule is the heart of your animation. You give it a name (e.g., myAnimation) and then define styles at different stages using percentages (0% to 100%) or keywords (from for 0%, to for 100%).

Let's see a simple example:

@keyframes slideAndFade {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(100px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

This @keyframes rule named slideAndFade makes an element move right by 100px and become semi-transparent at 50% of the animation, then return to its original state.

3. Animation Properties (Interactive Examples!)

Now, let's explore the properties you apply to an element to make it animate. Each section has an. Change the values and click "Apply Animation" to see the effect!

3.1. `animation-name`

This property specifies the name of the @keyframes rule to be used.

Name

Animation Name:

3.2. `animation-duration`

Defines how long an animation takes to complete one cycle (e.g., 2s for 2 seconds, 500ms for 500 milliseconds).

Duration

Duration (seconds): 2.0s

3.3. `animation-timing-function`

Controls the speed curve of the animation.

ease (default): Starts slow, then fast, then ends slow.
linear: Same speed from start to end.
ease-in: Slow start.
ease-out: Slow end.
ease-in-out: Slow start and end.
cubic-bezier(...): Custom speed curve.

Timing

Timing Function:

3.4. `animation-delay`

Specifies a delay before the animation starts.

Delay

Delay (seconds): 0.0s

3.5. `animation-iteration-count`

Defines how many times the animation should play. Can be a number or infinite.

Count

Iteration Count:

3.6. `animation-direction`

Specifies whether the animation should play forwards, backwards, or alternate cycles.

normal (default): Plays forwards each cycle.
reverse: Plays backwards each cycle.
alternate: Plays forwards then backwards.
alternate-reverse: Plays backwards then forwards.

Direction

Direction:

3.7. `animation-fill-mode`

Determines the styles applied to the element before and after the animation plays.

none (default): Styles are reset after animation.
forwards: Element retains the computed values from the last keyframe.
backwards: Element retains the computed values from the first keyframe (respecting delay).
both: Applies both forwards and backwards behavior.

Fill Mode

Fill Mode:

3.8. `animation` (Shorthand)

You can combine all animation properties into a single animation shorthand property. The order generally doesn't matter, but duration and delay are distinguished by the first being duration.

/* Order: name | duration | timing-function | delay | iteration-count | direction | fill-mode */
.element {
    animation: slideAndFade 2s ease-in-out 1s infinite alternate forwards;
}

This shorthand is very common in practice.

4. Try It Yourself!

Now it's your turn! Define your own @keyframes and apply them to the box below.

Define your `@keyframes`:

Apply animation properties:

Name:

Duration (s):

Timing Function:

Iteration Count:

Direction:

Your Box

What's Next?

You've learned the basics of CSS animations! Here are some ideas for what to explore next:

More Complex Keyframes: Experiment with animating more properties (e.g., font-size, border-radius, box-shadow) and adding more percentage stops (e.g., 25%, 75%).
Transitions vs. Animations: Understand the difference between CSS Transitions (for simple, single-property changes) and Animations (for complex, multi-stage sequences).
JavaScript Interaction: Learn how to use JavaScript to dynamically add/remove animation classes or modify animation properties for more control.
Performance: Research best practices for performant CSS animations to ensure smooth experiences.

Happy animating!

CSS Animation Editor

Interactive CSS Animation Tutorial

1. What are CSS Animations?

2. The @keyframes Rule

3. Animation Properties (Interactive Examples!)

3.1. animation-name

3.2. animation-duration

3.3. animation-timing-function

3.4. animation-delay

3.5. animation-iteration-count

3.6. animation-direction

3.7. animation-fill-mode

3.8. animation (Shorthand)