ā¤ Like
šŸ”– Save
šŸ”— Share
@thedevspaceio
@thedevspaceio

CSS Animations Cheatsheet

@thedevspaceio

šŸŽžļø CSS Animations Cheatsheet

Quick guide to CSS animations using @keyframes and the animation properties ā€” for entrance, looping, and multi-step effects.

āœ… Key concepts: @keyframes, animation-name, animation-duration, timing, delay, iteration, direction, fill-mode, play-state āœ… Practical examples and performance tips

#CSS #WebDev #Frontend #Animations #UI

Common Animation Properties

PropertyDescription
@keyframesDefines animation stages (0% - 100%).
animation-nameThe name of the @keyframes to apply.
animation-durationHow long one cycle takes (s / ms).
animation-timing-functionEasing curve between keyframes (linear, ease, cubic-bezier).
animation-delayTime to wait before starting the first iteration.
animation-iteration-countNumber of times to repeat (infinite allowed).
animation-directionnormal, reverse, alternate, alternate-reverse.
animation-fill-modeWhat styles apply before/after animation (forwards, backwards).
animation-play-staterunning or paused.
animationShorthand for name, duration, timing, delay, iteration, direction.

@keyframes

Define the animation steps.

css
@keyframes popBounce {
  0% {
    transform: translateY(0) scale(0.95);
    opacity: 0;
  }
  10% {
    transform: translateY(-12px) scale(1.08);
    opacity: 1;
  }
  30% {
    transform: translateY(8px) scale(0.98);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
  70% {
    transform: translateY(2px) scale(0.995);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

animation-duration

Controls how long one animation cycle runs.

css
@keyframes popBounce {
  /* . . . */
}
 
.card {
  animation-name: popBounce;
  animation-duration: 1000ms;
}

1s

2s

5s

animation-timing-function

Defines the pacing between keyframes.

css
.card {
  animation-name: popBounce;
  animation-duration: 500ms;
  animation-timing-function: ease-in;
}

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier()

animation-iteration-count

How many times the animation repeats (infinite allowed).

css
.card {
  animation-name: popBounce;
  animation-duration: 1000ms;
  animation-iteration-count: 3;
}

1

3

10

infinite

animation-direction

Controls playback direction per iteration.

css
/* direction example using longhand */
.card {
  animation-name: popBounce;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
}

normal

reverse

alternate

alternate-reverse

animation-fill-mode

What styles apply before/after the animation (none, forwards, backwards, both).

css
/* fill-mode example */
.card {
  animation-name: popBounce;
  animation-duration: 800ms;
  animation-fill-mode: both; /* none | forwards | backwards | both */
}
ValueDescription
noneDefault. No styles are applied before or after the animation; the element uses its normal state outside the animation.
forwardsAfter the animation finishes, the element keeps the styles from the last keyframe.
backwardsIf the animation has a delay, the element applies the first keyframe styles during that delay period (useful for showing an initial state before the animation starts).
bothCombines backwards and forwards: applies the first keyframe during any delay and retains the final keyframe styles after the animation ends.

animation-play-state

Pause/resume animations with JavaScript or user controls.

css
/* play-state example */
.card {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-play-state: running; /* or paused */
}

Shorthand: animation

Shorthand combines multiple animation properties. Prefer longhand when you need clarity.

css
/* shorthand example */
.card {
  animation: fadeMoveUp 360ms cubic-bezier(0.2, 0.9, 0.2, 1) 0ms 1 both;
}

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io