Transitions and Animations

CSS allows you to animate HTML elements without using JavaScript or Flash.

1. CSS Transitions

Transitions allow you to change property values smoothly, over a given duration.

To create a transition effect, you must specify two things:

The CSS property you want to add an effect to.
The duration of the effect.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Transition Properties

transition-property: Specifies the name of the CSS property the transition effect is for.
transition-duration: Specifies how many seconds or milliseconds the transition effect takes to complete.
transition-timing-function: Specifies the speed curve of the transition effect (linear, ease, ease-in, ease-out, ease-in-out).
transition-delay: Specifies a delay (in seconds) for the transition effect.

Shorthand: transition: property duration timing-function delay;

div {
  transition: width 2s linear 1s;
}

2. CSS Animations

Animations allow an element to gradually change from one style to another. You can change as many CSS properties you want, as many times as you want.

`@keyframes` Rule

To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Or using percentages */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Applying the Animation

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Animation Properties

animation-name: Specifies the name of the @keyframes animation.
animation-duration: Specifies how long time an animation should take to complete one cycle.
animation-delay: Specifies a delay for the start of an animation.
animation-iteration-count: Specifies the number of times an animation should run (infinite or a number).
animation-direction: Specifies whether an animation should be played forwards, backwards or in alternate cycles (normal, reverse, alternate, alternate-reverse).
animation-timing-function: Specifies the speed curve of the animation.
animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

Shorthand: animation: name duration timing-function delay iteration-count direction fill-mode;

div {
  animation: example 5s linear 2s infinite alternate;
}

3. Difference

Transitions: Simple changes from state A to state B. Triggered by an action (hover, focus, class change).
Animations: Complex sequences (A -> B -> C -> D). Can run automatically, loop, and have fine-grained control over intermediate steps.

programming/css/css programming/css/css3 programming/javascript/vanilla/web-animations-api programming/javascript/vanilla/animation-worklet-api

Backlinks

Created: March 17, 2026 • Last Modified: February 1, 2026

Docs Login