🚀 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

# Animation-delay

# Animation-duration

# Animation-timing-function

# Background-color

# Background-image

# Background-position

# Background-repeat

# Background-size

# Basic-Selectors

# Child-Selectors

# Class-Selectors

# CSS-Attribute-Selectors

# Descendant-Selectors

# Flex-direction

# Grid-template-areas

# Grid-template-columns

# Grid-template-rows

# Include-Css-in-Html

# Justify-content

# Justify-items

# Letter-spacing

# Media-queries

# Pointer-events

# RefDeviceCharacteristics

# RefDimensions

# RefScreenDimensions

# Siblings-Selectors

# Text-transform

# Top, Right, Bottom, Left

# Transition-delay

# Transition-duration

# Transition-timing-function

# Universal-Selectors

# Including-Css-in-Html

LOADING ENGINE...

CSS Transition Duration

Control the flow of time. Learn how to set animation speeds using seconds and milliseconds.

style.css

.btn {

width: 100px;

transition-property: all;

transition-duration: 500ms;

}

500ms

styles.css

1 / 9

⏱️

Tutor:The transition-duration property defines how long an animation takes to complete. Without it, changes happen instantly.

⭐ 0 EXP

CSS Mastery Tree

Unlock nodes by learning time units and syntax.

Concept 1: Seconds & Milliseconds

The core of transition-duration is time. You can specify time in seconds (s) or milliseconds (ms). 1s is equal to 1000ms.

System Check

Which value is equivalent to 1.5 seconds?

15ms150ms1500ms1005ms

Community Motion

Share Animations

Created a smooth hover effect? Share your timing variables.

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!

CSS Transition Duration

Pascual Vila

Frontend Instructor.

The transition-duration property is the heartbeat of CSS animations. It dictates how long a transition effect takes to complete. Without it, property changes happen instantaneously, which can feel jarring to the user.

Time Units

CSS uses two primary units for measuring time in transitions:

Seconds (s): The standard unit. 1s, 0.5s.
Milliseconds (ms): Used for finer control. 1000ms equals 1s. 500ms equals 0.5s.

User Experience

Choosing the right duration is critical. A duration that is too short (e.g., 50ms) might be unnoticeable, while one that is too long (e.g., 3s) makes the interface feel sluggish. A "sweet spot" for UI elements is usually between 200ms and 500ms.

Best Practices

Always specify the unit. Writing transition-duration: 2 is invalid CSS. Additionally, you can define multiple durations (e.g., 0.5s, 1s) to match the order of properties defined in transition-property.

CSS Duration Glossary

Seconds (s): The base unit of time in CSS. Examples: 1s, 0.3s.
Milliseconds (ms): 1/1000th of a second. Useful for fast UI transitions. 1000ms = 1s.
Interpolation: The process of calculating intermediate values between the start and end states over the specified duration.
Initial State: The value of a CSS property before the transition begins.