We have a pretty good looking UI now, but we can make it even better with some transitions. CSS3 transitions add animation effects to elements when their styles change. For example, if we change the size of an element, it will gradually change from smaller size to a larger size thereby providing visual feedback to the user. When things change gradually, it catches our eye more than something that just appears suddenly on the page.
The CSS3 transition
property allows us to specify transitions on elements. It has the following format:
transition: property duration timing-function delay
Here is an explanation of the parameters:
property
: The CSS property to add a transition to. For example, width
or color
. Use all
to apply transitions to all the properties.duration
: The length of time the transition takes. For example, 0.5s
takes half a second to complete the transition.timing-function
: Determines how the transition progresses over the duration:linear
: The same speed from beginning to endease
: Starts slow, then speeds up, then ends slowease-in
: Starts slow then speeds upease-out
: Starts fast then slows downease-in-out
: Eases in and then outcubic-bezier()
: If you don't like the predefined functions, you can build your owndelay
: The amount of time to wait before starting the transition.The cubic-bezier
function takes four parameters which are numbers from 0
to 1
. The following produces the same effect as the ease
function:
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
Building your own cubic-bezier
functions isn't something most people can just do in their heads. If you want to explore creating your own timing functions, check out http://cubic-bezier.com/.
Like the gradients, transitions are widely supported, but you should still use browser-specific prefixes when declaring it:
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
The easiest way to apply a transition is in combination with a CSS hover
selector. The following will fade the background color of an element from white to blue in one quarter of a second when the user moves the mouse over it:
#some-element { background-color: White; transition: all 0.25s ease; } #some-element:hover { background-color: Blue; }
18.227.228.95