- CSS Basics
- CSS Tutorial HomePage
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS transition-timing-function
The CSS transition-timing-function property is used to define the way to process the transition during specified transition-duration. For example:
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{width: 120px; height: 120px; background-color: gray; transition-duration: 1.4s; transition-timing-function: ease-in-out;} div:hover{border-radius: 50%; background-color: blue;} </style> </head> <body> <div></div> </body> </html>
Output
Hover the mouse cursor over the box to see the transition effect.
Basically the transition-timing-function defines the speed curve of transition.
CSS transition-timing-function Syntax
The syntax of transition-timing-function property in CSS, is:
transition-timing-function: x;
The value of x should be any of the following:
- linear - Apply the same speed curve to transition, from start to end. The transition-timing-function: linear; is equal to transition-timing-function: cubic-bezier(0,0,1,1);
- ease - Starts the transition slowly, then fast, then ends slowly. This is the default value. It is equal to cubic-bezier(0.25,0.1,0.25,1)
- ease-in - Defines slow start to the transition. It is equal to cubic-bezier(0.42,0,1,1)
- ease-out - Defines slow end to the transition. It is equal to cubic-bezier(0,0,0.58,1)
- ease-in-out - Defines slow start and end to the transition. It is equal to cubic-bezier(0.42,0,0.58,1)
- steps(int, start|end) - Used to define transition in intervals as defined using the int (a number greater than 0) parameter. The second parameter is optional. The default value of second parameter is end
- step-start - Used when we need to apply the final style. In place of step-start, we can also use steps(1, start)
- step-end - Used when we need to apply the initial style. In place of step-end, we can also use steps(1, end)
- cubic-bezier(v, v, v, v) - Used to apply completely custom speed curve for the transition. Here v parameter refers to a number from 0 to 1 including negative values. The first and last values are starting and ending point of the Cubic Bezier curve
- initial - Used to use the default value
- inherit - Used to use the value inherited by the parent element
CSS transition-timing-function Example
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{width: 80px; height: 60px; background-color: gray; transition-duration: 2s;} div.a{transition-timing-function: linear;} div.b{transition-timing-function: ease;} div.c{transition-timing-function: ease-in;} div.d{transition-timing-function: ease-out;} div.e{transition-timing-function: ease-in-out;} div:hover{width: 280px; background-color: chocolate;} </style> </head> <body> <h2>transition-timing-function: linear</h2> <div class="a"></div> <h2>transition-timing-function: ease</h2> <div class="b"></div> <h2>transition-timing-function: ease-in</h2> <div class="c"></div> <h2>transition-timing-function: ease-out</h2> <div class="d"></div> <h2>transition-timing-function: ease-in-out</h2> <div class="e"></div> </body> </html>
Output
transition-timing-function: linear
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
Let's create another example that uses step-start, step-end, and steps() to define the transition-timing-function property:
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{width: 80px; height: 60px; background-color: gray; transition-duration: 2s;} div.a{transition-timing-function: step-start;} div.b{transition-timing-function: step-end;} div.c{transition-timing-function: steps(10, start);} div.d{transition-timing-function: steps(30, start);} div.e{transition-timing-function: steps(10, end);} div.f{transition-timing-function: steps(30, end);} div:hover{width: 280px; background-color: blue;} </style> </head> <body> <h2>transition-timing-function: step-start</h2> <div class="a"></div> <h2>transition-timing-function: step-end</h2> <div class="b"></div> <h2>transition-timing-function: steps(10, start)</h2> <div class="c"></div> <h2>transition-timing-function: steps(30, start)</h2> <div class="d"></div> <h2>transition-timing-function: steps(10, end)</h2> <div class="e"></div> <h2>transition-timing-function: steps(30, end)</h2> <div class="f"></div> </body> </html>
Output
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(10, start)
transition-timing-function: steps(30, start)
transition-timing-function: steps(10, end)
transition-timing-function: steps(30, end)
Now it is the to create last example for this article, that uses cubic-bezier() with different combination of its parameters values to define the transition-timing-function property:
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{width: 80px; height: 60px; background-color: gray; transition-duration: 2s;} div.a{transition-timing-function: cubic-bezier(1, 0, 0, 1);} div.b{transition-timing-function: cubic-bezier(1, 1, 0.22, 1);} div.c{transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1);} div.d{transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);} div.e{transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);} div.f{transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);} div:hover{width: 280px; background-color: blue;} </style> </head> <body> <h2>transition-timing-function: cubic-bezier(1, 0, 0, 1)</h2> <div class="a"></div> <h2>transition-timing-function: cubic-bezier(1, 1, 0.22, 1)</h2> <div class="b"></div> <h2>transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1)</h2> <div class="c"></div> <h2>transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)</h2> <div class="d"></div> <h2>transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)</h2> <div class="e"></div> <h2>transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)</h2> <div class="f"></div> </body> </html>
Output
transition-timing-function: cubic-bezier(1, 0, 0, 1)
transition-timing-function: cubic-bezier(1, 1, 0.22, 1)
transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1)
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
« Previous Tutorial Next Tutorial »