CSS Transition
CSS Transitions
CSS transitions property allows you to change property values of a item smoothly, over a given duration. The following property can be use for css transition.
- transition: this property is use to specify four transition properties into a single property
- transition-delay: Specifies a delay (in seconds) for the transition effect
- transition-duration: Specifies how many time (seconds or milliseconds) a transition effect takes to complete
- transition-property: Specifies the name of the CSS property the transition effect is assign to
- transition-timing-function: Specifies the speed curve of the transition effec
Note: To create a transition effect, you must specify the CSS property you want to add an effect to and the duration of the effect
div {
transition: width 2s;
}
This effect can be call into action using the hover effect or any of the Javascript event as deem fit, specifying the property to act on.
div:hover {
width:250px;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: blue;
transition: width 2s linear 1s; /*1 second delay before starting and finish and duration 2s*/
}
div:hover {
width: 320px;
}
.div2 {
width: 120px;
height: 120px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
.div2:hover {
width: 320px;
}
</style>
</head>
<body>
<p> <b> Hover over the divs element below, to see the transition effect:</b> the
two div have the same transition effect but present in different ways</p>
<div> </div>
<br>
<div class="div2"> </div>
</body>
</html>
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect. The transition-timing-function property can have the following values:
- ease: specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear: specifies a transition effect with the same speed from start to end
- ease-in: specifies a transition effect with a slow start
- ease-out: specifies a transition effect with a slow end
- ease-in-out: specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
height: 80px;
background: blue;
color:white;
display:flex;
justify-content:center;
align-items:center;
transition: width 2s, height 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<h1> The transition-timing-function Property</h1>
<div id="div1"> linear</div> <br>
<div id="div2"> ease</div> <br>
<div id="div3"> ease-in</div> <br>
<div id="div4"> ease-out</div> <br>
<div id="div5"> ease-in-out</div> <br>
</body>
</html>
Transition With Other CSS Property
CSS Transition effect can be added to other CSS property to combine both effect to make animation.
The following example shows the CSS transition with CSS transformation
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
margin-bottom:20px;
color:white;
background: blue;
transition: width 2s, height 2s, transform 2s;
}
.one:hover {
transform: translate(50px);
}
.two:hover {
transform: scale(1.2)
}
.three:hover {
transform: skew(45deg)
}
.four:hover {
transform: rotate(180deg)
}
.five:hover{
width:150px;
height:150px;
transform: rotate(360deg)
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<div class="one">Translate</div>
<div class="two">Scale</div>
<div class="three">Skew</div>
<div class="four">Rotate 180<sup>0</sup></div>
<div class="five">Rotate 360<sup>0</sup> and grow</div>
</body>
</html>
