How to Create CSS Animations Online

CSS animations can make a website feel more dynamic, polished and interactive. They can help buttons respond to hover, cards appear smoothly, loaders move, icons bounce, notifications slide in and interface elements feel more alive.

But animation should be used carefully.

A good CSS animation supports the user experience. A bad animation distracts, slows down the interface or makes the page feel messy.

In this guide, you will learn how CSS animations work, what @keyframes are, which animation properties matter most and how to create animations faster with the free CSS Animation Generator by Free Utilities Online.

What Are CSS Animations?

CSS animations let you animate changes between CSS styles over time.

For example, you can animate an element from invisible to visible:

.fade-in {
  animation: fadeIn 600ms ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

This creates a simple fade-in effect.

CSS animations are commonly used for:

  • hover effects;

  • loaders;

  • cards;

  • buttons;

  • alerts;

  • modals;

  • icons;

  • badges;

  • page sections;

  • onboarding screens;

  • microinteractions.

Animations can improve the feel of an interface when they are subtle, fast and purposeful.

How CSS Animations Work

A CSS animation usually has two parts:

  1. An animation rule applied to an element.

  2. A @keyframes block that defines the animation steps.

Example:

.box {
  animation: slideUp 500ms ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

The .box class tells the browser which animation to run, how long it should last and how it should behave.

The @keyframes block defines what happens during the animation.

What Are @keyframes?

@keyframes define the stages of a CSS animation.

A simple keyframe animation can use from and to:

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

You can also use percentages:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

Percentages give you more control over intermediate steps.

Use from and to for simple animations. Use percentages when the animation needs several stages.

The CSS Animation Shorthand

The animation property is a shorthand that can include several animation settings in one line.

Example:

.element {
  animation: fadeIn 600ms ease-out 100ms 1 normal forwards;
}

This can include:

  • animation name;

  • duration;

  • timing function;

  • delay;

  • iteration count;

  • direction;

  • fill mode;

  • play state.

A more readable version is often:

.element {
  animation-name: fadeIn;
  animation-duration: 600ms;
  animation-timing-function: ease-out;
  animation-delay: 100ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

The shorthand is shorter, but individual properties can be easier to understand when learning.

Important CSS Animation Properties

animation-name

This connects the element to a @keyframes rule.

.element {
  animation-name: fadeIn;
}

The name must match the keyframes name:

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

animation-duration

This controls how long the animation takes.

.element {
  animation-duration: 600ms;
}

Good starting points:

  • quick microinteraction: 150ms to 250ms;

  • hover animation: 160ms to 300ms;

  • card entrance: 400ms to 700ms;

  • loader animation: 800ms to 1500ms;

  • decorative animation: 2s or more.

Avoid making interface animations too slow. Users should not feel like they are waiting for the UI.

animation-timing-function

This controls how the animation progresses over time.

.element {
  animation-timing-function: ease-out;
}

Common values:

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(...)

For UI animations, ease-out often feels natural because the motion starts quickly and slows down at the end.

For repeated loaders, linear can work well because the movement stays consistent.

animation-delay

This delays the start of the animation.

.element {
  animation-delay: 200ms;
}

Delay can be useful for staggered animations, where several elements appear one after another.

Example:

.card:nth-child(1) {
  animation-delay: 0ms;
}

.card:nth-child(2) {
  animation-delay: 100ms;
}

.card:nth-child(3) {
  animation-delay: 200ms;
}

Use delays carefully. Too much delay can make the page feel slow.

animation-iteration-count

This controls how many times the animation repeats.

.loader {
  animation-iteration-count: infinite;
}

For loaders, infinite animation makes sense.

For content entrance animations, use:

animation-iteration-count: 1;

Do not make important content bounce or pulse forever unless there is a clear reason.

animation-direction

This controls whether the animation plays forward, backward or alternates.

.element {
  animation-direction: alternate;
}

This is useful for looping animations:

.pulse {
  animation: pulse 1.2s ease-in-out infinite alternate;
}

animation-fill-mode

This controls what styles apply before and after the animation runs.

A common value is:

animation-fill-mode: forwards;

This keeps the final keyframe state after the animation finishes.

Example:

.fade-in {
  animation: fadeIn 600ms ease forwards;
}

Without forwards, the element may return to its original style after the animation ends.

CSS Animation Examples

Fade In

.fade-in {
  animation: fadeIn 600ms ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Best for:

  • cards;

  • modals;

  • alerts;

  • page sections;

  • images.

Slide Up

.slide-up {
  animation: slideUp 600ms ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Best for:

  • cards;

  • hero content;

  • tool panels;

  • feature sections.

Scale In

.scale-in {
  animation: scaleIn 360ms ease-out forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

Best for:

  • modals;

  • popovers;

  • badges;

  • small UI elements.

Button Hover Lift

For hover effects, transitions are often enough:

.button {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}

This is not a keyframe animation, but it is a common and useful CSS motion pattern.

Use transitions for simple state changes. Use animations when you need a timeline with keyframes.

Pulse Animation

.pulse {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.82;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Best for:

  • notification dots;

  • live indicators;

  • subtle attention cues.

Avoid using pulse animations on too many elements at once.

Loader Spin

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Best for:

  • loading states;

  • async actions;

  • upload indicators;

  • processing states.

CSS Animations vs Transitions

CSS animations and transitions are related, but they are not the same.

Use transitions when a property changes between two states, such as hover or focus.

Example:

.button {
  transition: background-color 160ms ease;
}

.button:hover {
  background-color: #1d4ed8;
}

Use animations when you want a timeline that can run automatically, repeat or include multiple steps.

Example:

.badge {
  animation: pulse 1.4s ease-in-out infinite;
}

Simple rule:

  • use transitions for state changes;

  • use animations for sequences.

Animate Transform and Opacity When Possible

For smoother UI animations, prefer animating transform and opacity.

Good:

transform: translateY(16px);
opacity: 0;

Be careful with properties that can trigger expensive layout changes, such as:

width
height
top
left
margin
padding

That does not mean you can never animate them, but for common UI animations, transform and opacity are usually safer and smoother.

Examples of good transform animations:

transform: translateY(12px);
transform: scale(0.96);
transform: rotate(8deg);
transform: translateX(-16px);

Use Easing to Make Motion Feel Natural

Easing controls the rhythm of the animation.

A linear animation moves at the same speed from start to finish:

animation-timing-function: linear;

This can work for spinners or continuous loaders.

For UI entrances, ease-out often feels better:

animation-timing-function: ease-out;

For more custom motion, use cubic-bezier():

animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

This can make animations feel snappier and more polished.

Respect Reduced Motion Preferences

Some users prefer reduced motion because animations can be distracting or uncomfortable.

You can respect that preference with the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This is a common accessibility-friendly pattern.

Animations should enhance the experience, not make the site harder to use.

Common CSS Animation Mistakes

1. Making Animations Too Slow

If every card takes a full second to appear, the interface can feel sluggish.

For most UI effects, keep animations short.

Good starting point:

animation-duration: 300ms;

For content entrance:

animation-duration: 500ms;

2. Animating Too Many Elements

If everything moves, nothing feels important.

Use animation to guide attention, not decorate every element.

3. Using Infinite Animations Without Purpose

Infinite animations can be annoying or distracting.

Use them for loaders, subtle indicators or decorative background elements, not for important reading areas.

4. Ignoring Focus and Hover States

Buttons and links should have clear interaction states.

Animations can support those states, but they should not replace clarity.

5. Overusing Bounce Effects

Bounce animations can feel playful, but too much bounce can make a UI feel unprofessional.

Use bounce only when it matches the brand and purpose.

6. Forgetting Reduced Motion

Always consider users who prefer less animation.

A reduced-motion fallback is a good accessibility habit.

Practical CSS Animation Recipes

Smooth Card Entrance

.card {
  animation: cardIn 500ms ease-out forwards;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Best for cards and section content.

Modal Pop In

.modal {
  animation: modalIn 280ms ease-out forwards;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

Best for modals and dialogs.

Slide Notification

.toast {
  animation: toastIn 360ms ease-out forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Best for alerts and notification toasts.

Floating Element

.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

Best for decorative hero elements.

Skeleton Loading Shine

.skeleton {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

Best for loading placeholders.

Generate CSS Animations Online

Writing animations manually is useful, but testing timing, easing and transforms can take time.

With the free CSS Animation Generator by Free Utilities Online, you can:

  • create animation presets;

  • adjust duration;

  • test easing;

  • preview motion;

  • generate keyframes;

  • copy ready-to-use CSS;

  • build effects for cards, buttons, loaders and UI elements.

This is especially useful when you want to create motion quickly without writing every keyframe from scratch.

Related Free CSS Tools

You may also find these tools useful:

Together, these tools help you create better motion, transform effects, hover states, timing curves and polished UI interactions.

FAQ

What is a CSS animation?

A CSS animation changes CSS property values over time. It usually uses an animation rule and a @keyframes block to define how the element changes during the animation.

What are CSS keyframes?

CSS keyframes define the stages of an animation. They can use from and to, or percentages such as 0%, 50% and 100%.

What is the difference between CSS animation and transition?

A transition animates a change between two states, such as hover. A CSS animation can run automatically, repeat and include multiple keyframe steps.

What CSS properties are best for animation?

For smooth UI animations, transform and opacity are usually good choices because they are commonly used for movement, scaling, rotation and fading effects.

How do I make CSS animations more accessible?

Respect reduced motion preferences with the prefers-reduced-motion media query and avoid excessive, flashing or distracting animations.

Final Tip

Good CSS animation should feel helpful, not distracting.

Start with subtle motion, use short durations, animate transform and opacity when possible, and always keep accessibility in mind.

Try the CSS Animation Generator to create, preview and copy CSS animations for your next interface.

Related Posts

Scroll al inicio