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 transition example
- Transition timer function value
- CSS transition in browser DevTools
- Which properties can be animated using CSS Transitions
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 |
Thistransition
Attributes 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.one
with.three
Element, the purple circle, there is a transition animation to ease the background change, while the yellow circle does not, because they don’ttransition
Property definition.
Transition timer function value
transition-timing-function
Allows 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:
This is Firefox:
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
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox