Master CSS
TRANSITION & TRANSFORMATION
Explore all transition properties and timing functions with beautiful, intractive examples
Property
duration
delay
timing-fuction
Hover Me !
TRANSITION PROPERTY
The fore core properties of transition
Transition-property
Spesific the CSS properties to anime
How to change background color
Transition-property
Defines how long the transition takes
Hover to see 2s duration
Transition-property
Sets delay before the transition starts
Hover to see 1s delay
Transition-property
Controls the speed curves of the transition
Hover to see ease effect
Transition Timing Functions
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier
TRANSFORMATION PROPERTIES
Explore CSS transform functions with interactive examples
translate()
Moves element from its position
scale()
Changes element size
rotate()
Rotates the element
skew()
Skews along X/Y axis
matrix()
Combines transformations