Professional Documents
Culture Documents
CSS Transitions
CSS Transitions Overview
● Introduction
● How does a transition work?
● Syntax
● Properties
● Examples
Introduction
● CSS transitions are an easy way for a designer to enhance
the interactivity of a design using animation.
.circle { .circle:hover {
transform: scale(1); transform: scale(1.5);
width: 150px; }
height: 150px;
background-color: #F13E0B;
border-radius: 50%;
transition: transform 250ms;
}
How does a transition work?
This is how CSS transitions
work: by gradually
transitioning from one value
to another over time.
.circle { .circle:hover {
transform: scale(1); transform: scale(1.5);
width: 150px; }
height: 150px;
background-color: #F13E0B;
border-radius: 50%;
transition: transform 250ms;
}
Basic syntax
.sample-element {
transition: <property to animate> <time>;
}
A property could be almost anything that holds a The time describes how long the animation will
numeric value: width, height, margin, go on for. The higher the value, the longer or
padding, color, transform... slower it will take.
.change-width:hover {
width: 250px;
}
To determine the starting and ending width of
the element, we have to add some additional
CSS.
Combining transitions
It's also possible to have more than one property animate, like in the third example
here! Just use a comma to separate each transition rule.
nav a {
...
transition: height 500ms;
}
nav a {
...
transition: background-color 500ms;
}
nav a {
...
transition: height 500ms, background-color 500ms;
}
the comma
separator
Combining transitions
You can also split up the declaration like this. If there's only one value under
transition-duration, it will be used for all the properties declared under
transition-property.
nav a {
transition-property: height, background-color;
transition-duration: 500ms;
}
Transition properties
There are also other properties, like transition-delay. Notice how the
transition only plays if the cursor stays on the button for at least 250ms.
.circle {
transition-property: color, background-color, border;
transition-duration: 500ms;
transition-delay: 250ms;
}
adds
.circle:hover { delay!
color: #FFFFFF;
background-color: #00ad11;
border:12px solid;
}
Note how the linear animation maintains a constant speed throughout. Ease-in starts out slow then
speeds up, while ease-out is the opposite, with a fast start and a slow end.