In this article of Advance CSS tutorial, we will be learning the transition and all the other properties associated with it. By the end of this article, you will have a brief idea about using transition property to provide some animation on the element.
CSS Transition
Using the CSS transition property, we can create smooth changes on the element with a given time when an event occurred on the element. And when something changes with time, it creates the Animation effects. In this CSS tutorial, we have discussed the following transitions properties.
-
transition -
transition-delay -
transition-duration -
transition -property -
transition-timing-function
Note: Many old browser versions do not support transition property, so make sure you have the latest version of your browser.
Use CSS transition
When we use the transition property, there are two things we need to mention
- The CSS property on which we want to perform the transition.
- The time duration of the transition in seconds (s units).
If the duration is not specified, the transition won’t be performed.
Example
Create a transition in which the element box width increases from 70px to 200px in 2second when the user hovers over the element.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 70px;
height:150px;
background-color: green;
transition: width 2s;
}
.box:hover{
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<div class="box">Transition duration will only be applied on the width not height</div>
</body>
</html>
Transition on multiple properties
In the above example, we only applied transition on the width property, but if we want to apply transition on more than one property, we can do it with the help of several properties values. When we specify several properties as a value for the transition, they must be separated with a comma.
Syntax
{transition: property1 time1, property2 time2, ….}
Example
Create a transition in which the element box width increases from 70px to 200px in 2seconds and height change from 70px to 200px in 4 seconds, when the user hover over the element.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 70px;
height:70px;
background-color: green;
transition: width 2s, height 4s;
}
.box:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Speed Curve of the transition with transition-timing-function
With the help of transition-timing-function property, we can define the timing curve of the transition effect. It does not affect the overall duration of the transition, it just helps in providing speed effects. transition-timing-function property only accepts one of these six values.
-
ease -
linear -
ease-in -
ease-out -
ease-in-out -
cubic-bezier(a,b,c,d)
The
ease
value starts the transition with slow speed, then fast the speed for the middle section, and at last, end the transition with slow speed. And it is the default value for transition-timing-function. The
linear
value maintains the same transition speed. The
ease-in
value starts a transition with slow speed. The
ease-out
value end the transition with slow speed. The
ease-in-out
start and end the transition with slow speed. The
cubic-bezier(a,b,c,d)
let us define a custom speed for the transition.
Example
Create a transition with constant transition speed.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 70px;
height:70px;
background-color: green;
transition: width 4s, height 4s;
transition-timing-function: linear;
}
.box:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Delay the transition
The transition-delay property can halt the transition for a specified time before it gets started.
Example
Delay the transition starting by 1 second.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 70px;
height:70px;
background-color: green;
transition: width 4s, height 4s;
transition-delay: 1s;
}
.box:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Transition with transformation
transition
property is often used along with the transform property to create some amazing animation. Let’s create a box which rotates and its size increases when the user hovers over it.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 70px;
height:70px;
background-color: green;
transition: width 4s, height 4s, transform 4s;
}
.box:hover{
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Transition sub-properties
The transition property is a shorthand for transition-property, transition-duration, transition-timing-function and transition-delay.
Syntax
{transition: transition-property transition-duration transition-timing-function transition-delay}
Example
.box {
transition-property: height;
transition-duration: 4s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
This CSS code is similar to
.box {
transition: height 4s ease-in 1s;
}
Summary
-
The
transitioncreates a smooth effect on changing element properties. - To create a transition, we must specify the property on which the transition should be performed and the duration of the transition.
-
The
transition-delayproperty halts the transition starting for a specified time period. -
transition property is a shorthand for
transition-property, transition-duration, transition-timing-function and transition-delayproperties.