Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 8

Cubic Bézier Curves

This page demonstrates how to create a timing function based on a Cubic Bézier curve. Enter a duration length in the input box. Enter the parameter values for the Cubic Bézier curve in the four input boxes for the function. Move your mouse pointer over the Start box to compare the effect of different timings. Try the following Cubic Bézier curves:

cubic-bezier(1, 0, 0, 1)
cubic-bezier(0, 2, 1, -2)
cubic-beizer(1, 0, 1, -0.5)

Cubic Bézier Curves

Set Duration

seconds

Timing Options

Transition Graph Cubic Bezier Curve
ease
ease 		cubic-bezier(0.25, 0.1, 0.25, 1)
linear
linear 		cubic-bezier(0, 0, 1, 1)
ease-in
ease-in 		cubic-bezier(0.42, 0, 1, 1)
ease-out
ease-out 		cubic-bezier(0, 0, 0.58, 1)
ease-in-out
ease-in-out 		cubic-bezier(0.42, 0, 0.58, 1)

custom 		cubic-bezier(, , , )

START

ease ease ease-in ease-out ease-in-out

Hover the Mouse Pointer over the Starting Box to Start the Transition

div#track img#one {transition: left border-radius filter 4s ease;}

div#track img#two {transition: left border-radius filter 4s linear;}

div#track img#three {transition: left border-radius filter 4s ease-in;}

div#track img#four {transition: left border-radius filter 4s ease-out;}

div#track img#five {transition: left border-radius filter 4s ease-in-out;}

div#track canvas#six {transition: left border-radius filter 4s cubic-bezier(1, 0, 0, 1);}