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

CSS Transitions Cheatsheet

@thedevspaceio

ā±ļø CSS Transitions Cheatsheet

Short guide to the transition properties that animate changes between states ā€” duration, timing, delay and property control with examples.

āœ… Common Transition Properties āœ… transition-property āœ… transition-duration āœ… transition-timing-function āœ… transition-delay āœ… transition shorthand āœ… Practical examples

#CSS #WebDev #Frontend #Transitions #Animations

Transition Properties

PropertyDescription
transition-propertyWhich CSS property (or properties) to animate.
transition-durationHow long the transition lasts.
transition-timing-functionEasing curve (linear, ease, ease-in-out, cubic-bezier).
transition-delayTime to wait before starting the transition.
transitionShorthand for property duration timing-function delay

transition-property

Defines which property (or properties) should be animated.

css
.card {
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: ease;
}
.card:hover {
  transform: translateY(-6px);
  opacity: 0.95;
}

Hover

transition-duration

Controls how long the transition runs.

css
.card {
  transition-property: transform;
  transition-duration: 500ms;
}
.card:hover {
  transform: translateX(8px);
}

Fast

Slow

transition-timing-function

Defines the easing curve between states.

css
.card {
  transition-property: transform;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:hover {
  transform: translateY(12px);
}

Common values include:

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier()

cubic-bezier(x1, y1, x2, y2) defines a custom easing curve using two control points.

Their values are in the range [0,1] in most cases.

Use cubic-bezier only when you need fine-grained control over acceleration and deceleration.

transition-delay

Delays the start of the transition.

css
/* delay example using explicit transition-delay */
.card {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-delay: 150ms;
}
.card:hover {
  transform: translateY(-8px);
}

Delayed

transition

A shorthand combining property, duration, timing function and delay. Use multiple comma-separated entries for multiple properties.

css
.card {
  transition:
    transform 300ms ease-in-out 50ms,
    opacity 300ms ease-in-out 50ms;
}
.card:hover {
  transform: translateY(-6px);
  opacity: 0.95;
}

Full-Stack AI Developer Roadmap

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

@thedevspaceio
www.thedevspace.io