🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS transition-delay

Control the heartbeat of your animations. Define exactly when a transition should wake up and start moving.

transition.css
1 / 6
⌛
Tutor:The transition-delay property specifies when the transition effect will start.

Animation Timeline

Master the flow of time in CSS.

Positive transition-delay

A positive value causes a countdown before the transition begins. If you set 2s, the browser waits exactly 2 seconds after the hover (or state change) to start moving.

Timing Check

What happens with 'transition-delay: 5s'?

Detailed Characteristics

The transition-delay property is part of the CSS Transitions module. It defines the time to wait before starting the transition effect once a property change is triggered.

Syntax & Units

  • transition-delay: 2s; (Seconds)
  • transition-delay: 250ms; (Milliseconds)
  • transition-delay: 1s, 200ms; (Comma-separated for multiple properties)

Browser Defaults

  • Default: 0s
  • Inherited: No
  • Animatable: No (Timing itself is not animatable)

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!