CSS3 specification includes support for transitions which allows to change properties from one state to another. Classic example of transition in HTML include behavior defined under the ‘hover’ keyword. However, unlike the behavior observed with ‘hover’ keyword, CSS3 transitions have a time lapse element.
CSS transitions are used to change styles from one to another.
To use CSS transitions , we need to specify the property for which we want to add an effect, as well as the duration for the effect.
Note that transitions are a presentational effect and only work with animatable CSS properties.
The following chart indicates the CSS properties which are animatable:
|
Property Name |
Transition type |
|
background-color |
as color |
|
background-position |
as repeatable list of simple list of length, percentage, or calc |
|
border-bottom-color |
as color |
|
border-bottom-width |
as length |
|
border-left-color |
as color |
|
border-left-width |
as length |
|
border-right-color |
as color |
|
border-right-width |
as length |
|
border-spacing |
as simple list of length |
|
border-top-color |
as color |
|
border-top-width |
as length |
|
bottom |
as length, percentage, or calc |
|
clip |
as rectangle |
|
color |
as color |
|
font-size |
as length |
|
font-weight |
as font weight |
|
height |
as length, percentage, or calc |
|
left |
as length, percentage, or calc |
|
letter-spacing |
as length |
|
line-height |
as either number or length |
|
margin-bottom |
as length |
|
margin-left |
as length |
|
margin-right |
as length |
|
margin-top |
as length |
|
max-height |
as length, percentage, or calc |
|
max-width |
as length, percentage, or calc |
|
min-height |
as length, percentage, or calc |
|
min-width |
as length, percentage, or calc |
|
opacity |
as number |
|
outline-color |
as color |
|
outline-width |
as length |
|
padding-bottom |
as length |
|
padding-left |
as length |
|
padding-right |
as length |
|
padding-top |
as length |
|
right |
as length, percentage, or calc |
|
text-indent |
as length, percentage, or calc |
|
text-shadow |
as shadow list |
|
top |
as length, percentage, or calc |
|
vertical-align |
as length |
|
visibility |
as visibility |
|
width |
as length, percentage, or calc |
|
word-spacing |
as length |
|
z-index |
as integer |
We define a transition using two new CSS properties.
A typical CSS transition is of the following format
div
{
transition-property: propertyname;
transition-duration: duration;
}
E.g.
div
{
transition-property: color, #(100,100,100);
transition-duration: 2s;
}
If you want to specify multiple transitions, you need to specify them as comma-separated-values.
div
{
transition-property: first_propertyname, second_propertyname, …;
transition-duration: duration_for_first, duration_for_second,…;
}
In case the number of transition properties and transition duration are not equal, the length of transition-property list determines the number of items in each list examined when starting transitions.
When the number of transition-properties are multiple of items in transition-duration, the duration durations are cycled. In case they are not multiple, they are used until there are a multiple and the remaining values are ignored.
We can also specify ‘none’ as value for transition-property , which would imply that no properties are transitioned.
We can also specify ‘0s’ as value for transition-duration, which would imply an immediate transition.
There are two additional transition relate properties:
1. transition-timing – which specifies how fast/slow the transitions will occur.
2. transition-delay – which specifies how long to wait to start the transition after transition is initiated.
Here is an example of a simple transition:
input {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
Here is a simple HTML page which shows transition in play.
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100px;
background: orange;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0.5s;
}
input:hover {
width: 200px;
}
</style>
</head>
<body>
<input></input>
<p>Hover over the input element above, to see the transition effect.</p>
</body>
</html>
When we hover over the orange input box, the length of the box changes. This is CSS3 transition in action.
In this article, we saw how to use CSS3 transitions in web pages. I hope you have found this information useful.
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
http://www.w3.org/TR/css3-transitions/
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
