🚀 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 Timing

Control the flow of time. Learn how to accelerate and decelerate animations using ease, linear, and cubic-bezier.

style.css
.mover {
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
styles.css
1 / 9
⏱️

Tutor:The transition-timing-function property controls how intermediate values are calculated during a transition. It defines the acceleration curve.


Timing Mastery

Unlock nodes by learning standard keywords, bezier curves, and steps.

Concept 1: Standard Keywords

The most common values are keywords like ease, linear, ease-in, ease-out, and ease-in-out. These provide predefined acceleration curves suitable for most UI interactions.

System Check

Which keyword represents a transition that starts slow and speeds up?

Community Curves

Share Custom Beziers

Created a perfect bounce or elastic effect? Share your cubic-bezier values.

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 Timing Function

Author

Pascual Vila

Frontend Instructor.

The transition-timing-function property defines the acceleration curve of a transition. It determines how the intermediate values of the CSS properties being affected are calculated. In simpler terms, it controls the speed of the transition over its duration.

Standard Keywords

CSS provides several predefined keywords that represent common easing curves:

  • ease: (Default) Starts slowly, accelerates sharply, and then slows down towards the end.
  • linear: Constant speed from start to end. No acceleration.
  • ease-in: Starts slowly and accelerates.
  • ease-out: Starts quickly and decelerates.
  • ease-in-out: Starts slowly, accelerates in the middle, and slows down at the end.

Custom Control: Cubic Bezier

For precise control, you can define your own curve using cubic-bezier(n,n,n,n). The values range from 0 to 1, representing control points on a Bezier curve. Values outside this range can create bouncing or elastic effects.

Discrete Steps

The steps() function allows you to break the transition into a specific number of intervals, creating a jumpy or frame-by-frame animation rather than a smooth flow.

Motion Glossary

Linear
A timing function where the rate of change is constant. There is no acceleration or deceleration.
Cubic Bezier
A mathematical curve defined by four control points used to model smooth curves that scale indefinitely. Used in CSS to define custom speed curves.
Steps
A timing function that displays the transition in discrete jumps (frames) rather than a smooth continuum.
Easing
The process of making a movement look natural by adjusting the acceleration and deceleration.