How to customize a CSS animation

Published and reviewed by animania.info · July 12, 2026

An animation example is a starting point, not a component you must use unchanged. Most effects can be adapted safely by separating three concerns: the selector that chooses an element, the animation properties that control playback, and the keyframes that define the visual states.

Copy the selector and keyframes together

The value of animation-name must match the name after @keyframes. Rename both when a project already uses that name. A descriptive prefix such as profile-card-enter is less likely to collide with a third-party stylesheet than a broad name such as slide.

.profile-card {
  animation-name: profile-card-enter;
  animation-duration: 400ms;
}

@keyframes profile-card-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

When copying from an animania detail page, remove the surrounding <style> element if the code is going into an existing CSS file. Keep it only when the example is being placed directly in an HTML document.

Change speed without rewriting keyframes

Start with animation-duration. A shorter duration makes the same keyframes feel sharper; a longer duration makes their individual stages more visible. Interface feedback is usually easier to follow when it completes quickly, while an explanatory demo can be slower. Avoid assuming one duration is correct for every context: test it with the real distance and content.

Use animation-delay when an effect should begin later. A negative delay does not wait; it starts the animation as though part of it has already played. This is useful for distributing repeated decorative elements across a cycle without making the first render wait.

Adjust distance, direction, and scale

Movement examples commonly use translateX() or translateY(). Change the sign to reverse direction and change the length to alter distance. Percentages are relative to the animated element, whereas rem and pixel values are fixed lengths. For a component that changes size, a percentage may preserve the visual proportion better.

A scale of 1 is the element's normal size. Values below one shrink it and values above one enlarge it. Scaling to exactly zero can make an element disappear visually while it remains present to assistive technology and may still receive focus. If the element must truly become unavailable, manage visibility and interaction state separately from the animation.

Customize color and transparency

Replace demonstration colors with design-system variables rather than copying hard-coded values through an application. Opacity affects the complete element, including text and children. To fade only a background, animate a separate pseudo-element or a color with an alpha channel instead.

.notice {
  --notice-accent: deeppink;
  background-color: var(--notice-accent);
}

Keep the final state intentionally

After a non-repeating animation ends, the browser normally returns to the styles outside its keyframes. animation-fill-mode: forwards keeps the values from the final keyframe, but it does not permanently rewrite the component's state. For important state such as whether a panel is open, update the component or DOM state and let CSS reflect that state.

Troubleshooting checklist

• Confirm that the selector matches the intended element.
• Confirm that animation-name and @keyframes match.
• Give empty demonstration elements a visible width, height, and background.
• Check whether another rule overrides transform or animation.
• Remember that two rules cannot independently replace the same transform value.
• Test the component with reduced motion and keyboard focus before release.

Continue with animation timing, review accessible motion, or choose a starting point from the CSS effect index.