CSS Transitions
CSS transitions allow you to animate the original value of a CSS property to a new value over time, controlling the rate at which property values change. Most properties change their values in 16 milliseconds, so the recommended standard transition time is 200ms.
The change of properties occurs when a certain event occurs, which is described by the corresponding pseudo-class. The most commonly used pseudo-class is :hover. However, this pseudo-class does not work on mobile devices such as iPhone or Android. A generic solution that works in both desktop and mobile browsers would be JavaScript event handling (like switching classes on click).
Transitions apply to all elements as well as pseudo elements :before and :after. To specify all transition properties, we use the shorthand property which is – transition.
CSS transition-property Property
Contains the name of the CSS properties to which the transition effect will be applied. A property value can contain either one property or a comma-separated list of properties. When creating a transition, you can use both the initial and final states of the element. The property is not inherited.
The effects you create should be subtle. Not all properties require a gradual change over time due to user experience. For example, when we hover over a link, we want to see an instant change of the link color or the color and underline style. Therefore, transitions should be used for those properties to which you really need to draw attention.
For a list of values that can be used, please see our transition-property CSS property page.
Example Code
div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}CSS transition-duration Property
Sets the amount of time during which the transition should take place. If different properties have different transition values, they are separated by commas. If the transition duration is not specified, then the animation will not occur when changing property values. The property is not inherited.
For a list of values that can be used, please see our transition-duration CSS property page.
Example Code
div {
transition-duration: .2s;
}Visual Example
<div class="wrap">
<h1>Hover over block</h1>
<p>transition-duration</p>
<div class="container">
<span>0.5s</span>
<div class="box1 box"></div>
</div>
<div class="container">
<span>1s</span>
<div class="box2 box"></div>
</div>
<div class="container">
<span>2s</span>
<div class="box3 box"></div>
</div>
</div>body {font-family: 'sans-serif', serif; margin: 0;}
.wrap {text-align: center;}
.container {
display: inline-block;
}
h1 {
color: #3A262F;
font-weight:normal;
text-align: center;
}
p {text-align:center;margin-bottom:20px;}
.box {
height: 40px;
width: 40px;
border-radius: 50%;
margin: 20px 50px 0;
}
.wrap:hover .box {
-webkit-transform: scale(2);
-ms-ransform: scale(2);
transform: scale(2);
}
.box1 {
background: #FFD592;
transition: .5s;
}
.box2 {
background: #F9A88B;
transition: 1s;
}
.box3 {
background: #B39190;
transition: 2s;
}CSS transition-timing-function Property
The property defines a time function that describes the speed at which an object transitions from one value to another. If you are defining more than one transition for an element, such as the element’s background color and position, you can use different functions for each property. The property is not inherited.
For a list of values that can be used, please see our transition-timing-function CSS property page.
Check out our new generator – CSS Cubic Bezier Generator, this generator will help you visualize animation timing.
Example Code
div {
transition-timing-function: linear;
}Visual Example
<div class="animation_box">
<p>Hover over container to view transition-function-timing.</p>
<div class="elem" style="transition-timing-function: ease">ease</div>
<div class="elem" style="transition-timing-function: linear">linear</div>
<div class="elem" style="transition-timing-function: ease-in">ease-in</div>
<div class="elem" style="transition-timing-function: ease-out">ease-out</div>
<div class="elem" style="transition-timing-function: ease-in-out">ease-in-out</div>
<div class="elem" style="transition-timing-function: step-start">step-start</div>
<div class="elem" style="transition-timing-function: step-end">step-end</div>
<div class="elem" style="transition-timing-function: steps(6, end)">steps(6, end)</div>
<div class="elem" style="transition-timing-function: cubic-bezier(0, 1.2, 1, -0.6)">cubic-bezier(0, 1.2, 1, -0.6)</div>
</div>.animation_box {
padding: 0 15px 15px 15px;
}
.elem {
background: #3366ff;
color: white;
width: 190px;
padding: 5px 0 5px 0;
text-indent: 5px;
margin: 5px 0;
transition: width 2s;
}
.animation_box:hover .elem {
width: 100%;
}CSS transition-delay Property
An optional property allows you to make the property change not instantly, but with some delay. Not inherited.
For a list of values that can be used, please see our transition-delay CSS property page.
Example Code
div {
transition-delay: .5s;
}Visual Example
<div class="wrap">
<h1>Hover over block</h1>
<p>transition-delay</p>
<div class="container">
<span>0s</span>
<div class="box1 box"></div>
</div>
<div class="container">
<span>0.5s</span>
<div class="box2 box"></div>
</div>
<div class="container">
<span>1s</span>
<div class="box3 box"></div>
</div>
</div>body {font-family: 'sans-serif', serif; margin: 0;}
.wrap {
margin: 20px 0 0;
text-align: center;
}
.container {display:inline-block}
h1 {
color: #3A262F;
font-weight:normal;
}
p{margin-bottom:15px;}
.box {
border-radius: 8px;
margin: 20px;
width: 60px;
height: 60px;
}
.wrap:hover .box {
transform: scale(1.5);
}
.box1 {
background:#BED3E4;
transition: 1s linear;
}
.box2 {
background:#BCB4D9;
transition: 1s linear .5s;
}
.box3 {
background:#EBC0AD;
transition: 1s linear 1s;
}Transition Shorthand Property
All properties responsible for changing the appearance of an element can be combined into one CSS property – transition.
The syntax is:transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;Using the default values, the entry:
div {
transition-property: all;
transition-duartion: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}would be equivalent to:
div {transition: all 1s ease 0s;}Smooth transition of several properties
For an element, you can specify several consecutive transitions by listing them separated by commas. Each transition can be decorated with its own temporary function.
div {transition: background 0.3s ease, color 0.2s linear;}or
div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}