Getting started with CSS transition

CSS transitions are the easiest way to create animations in CSS. In the transition, you change the value of the property and tell CSS to slowly change it to the final state based on certain parameters

Introduction to CSS transitions

CSS transitions are the easiest way to create animations in CSS.

In the transition, you change the value of the property and tell CSS to slowly change it to its final state based on certain parameters.

CSS transitions are defined by the following properties:

property	description
`transition-property`	CSS properties that should be transitioned
`transition-duration`	Duration of transition
`transition-timing-function`	The timing function used by the animation (common values: linear, easing). Default value: mitigation
`transition-delay`	Optional number of seconds to wait before starting the animation

ThistransitionAttributes are a convenient shorthand:

.container {
  transition: property duration timing-function delay;
}

CSS transition example

This code implements the CSS transition:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.circle:hover {
background: rgba(142, 92, 205, 0.25); /* lighter */
}

See failure examplehttps://glitch.com/edit/#!/flavio-css-transitions-example

On hover.onewith.threeElement, the purple circle, there is a transition animation to ease the background change, while the yellow circle does not, because they don’ttransitionProperty definition.

Transition timer function value

transition-timing-functionAllows to specify the acceleration curve of the transition.

You can use some simple values:

value
Linear
Comfortable
Ease in
Ease
Ease in

This glitchShow how these work in practice.

You can use the following command to create a fully customized timing functionCubic Bézier curve. This is quite advanced, but basically all of the above functions are built using Bezier curves. We have some convenient names because they are very common.

CSS transition in browser DevTools

ThisBrowser development toolsProvides a good way to visualize the transition.

This is Chrome:

Debug CSS Transitions in Chrome DevTools

This is Firefox:

Debug CSS Transitions in Firefox DevTools

In these panels, you can edit transitions and experiments in real time directly on the page without reloading the code.

Which properties can be animated using CSS Transitions

a lot of! But not all CSS properties.

This is the complete list:

property
background
background color
Background position
Background size
boundary
Border color
Border width
Bottom edge
Border background color
Radius of lower left radius
Radius of bottom right border
Bottom width
Left border
Left border color
Left border width
Boundary radius
Right margin
Right border color
Right border width
Border spacing
Border top
Border top color
The radius of the upper left corner of the boundary
Upper right radius of the boundary
Border width
bottom
Box shadow
Caret color
Clip
colour
Number of columns
Column gap
Column rule
Column rule color
Column rule width
Column width
Column
content
filter
Flexible
Elastic foundation
Flexible growth
Bending contraction
Font
font size
Font size adjustment
Font stretch
Font weight
Grid area
Grid auto column
Automatic grid flow
Automatic grid
Grid column end
Grid column gap
Grid column start
Grid column
Grid gap
Grid end of line
Grid line gap
Grid line start
Grid row
Grid template area
Grid template column
Grid template row
Grid template
grid
height
Left
Letter spacing
Row height
profit
Bottom edge
Left margin
Right margin
Top margin
maximum height
Maximum width
Minimum height
Minimum width
opaque
command
Outline
Contour color
Contour offset
Outline width
filling
Underfill
Left padding
Fill to the right
Top padding
view
Perspective origin
quotation marks
correct
Label size
Text decoration
Text decoration color
Text indent
Text shadow
optimal
Deformed.
Vertical alignment
visibility
width
Word spacing
index

Download mine for freeCSS Manual