Definition of CSS Transition Property
CSS Transition property is defined as one of the CSS Property to make transitions for a quiet period when a CSS property makes changes from one value to another without flash. It takes itself into two states namely hover and active and sometimes by pseudo-classes. With CSS3 the appearance and behaviour of an element are changed by which animations can be made with multiple points of transitions upon various keyframes. Herewith the transitions only individual properties are animated. In this article, we shall learn how to implement CSS Transitions and how to do animations within this property.
Syntax
The Syntax is pretty straightforward. The general syntax is given below and it takes four values.
Transition: transition-property | duration |timing |delay;The transition takes almost four different values in total
How does Transition Property Work in CSS?
CSS Transition works on the principle of Transition values as it helps in having a transition between two states of an element. The core objective is to change the value of a property and CSS gives his hand to slowly change the parameters towards the final state. There are a few minimum numbers of properties that would do animate. Most importantly we need to specify two things to create a better transition.
- Emphasis on a CSS property
- Duration of the effect
1. Transition- Property
This specifies exactly what properties will be altered with changes. We can also add multiple transition-properties separated by commas. Or in another case the keyword ‘all‘is used to specify Multiple transitions. But not all the properties could be transitioned as some values doesn’t have any mid-points like colour, font-sizes. Few of the transitional-property are clip, height, right,top, bottom, colour, font-weight etc.
. demo
{
Transition-property: color , border; // value
}So here I have used two values separated by commas means transitioning is actioned on multiple properties. The Sub-properties are explained individually below.
2. Transition-Timing
This property determines the speed on which the element moves with the help of Duration property transition can do multiple speed withing a single shot duration. This property includes keywords like linear, ease-in, ease-in-out, ease-in Linear shows the constant variation from one state to another. Ease-in determines the transition by taking it slow and make a good speed throughout the transition. Ease-out is quite the opposite of ease-in. And finally, Ease-in-out is the mixture of both that it starts slowly and speeds up in the mid and at the end eventually flows down again.This determines the accelerative curve for the present element transition
3. Transition-Duration
It determines how long a transition takes time to finish the hover. Duration of the time units is specified in s or ms. If the value is 0s(default) the page doesnot show any transitions.
Ess
{
Transition-duration : 6 s;
}4. Transition-Delay
To calculate the beginning time of the animation move the delay property is implemented. Same like duration it too takes units in s or ms. It accepts both positive and negative values.
Note: To have a better curve with four points Bezier Curve can be used. Ease of time allows changing the rate of change of parameters to produce realism in the transitions.
Sample:
transition-property: margin-bottom;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 0.8s;The above transition property is done as shorthand property as:
transition: margin-bottom 2s ease-in-out 0.8s;Examples of CSS Transition Property
Let’s see the transition action by considering few HTML codes over here. Here we will be demonstrating the transition affects their properties and timing functions with examples.
Example #1
In the below example, the specified box would change its background colour.
Code:
<html>
<head>
<title>Footer demo using HTML & CSS</title>
<style>
body {
display: flex;
min-height: 80vh;
justify-content: center;
align-items: center;
}
.boxmove {
font-size: 4em;
font-family: initial;
border: solid;
background-color: green;
padding: 0.6em 1em;
transition: background-color 0.7s ease-out;
}
.boxmove:hover {
background-color: yellow;
}
</style>
</head>
<body>
<button class="boxmove">move mouse to check the color transition</button>
</body>
</html>Output:
When Hovering .boxmove elements there is a transition animation that eases the background colour from green to yellow.
Example #2
Let’s take an example where a transition effect is on width property and given a duration of 6 secs. Here it animates the element <div > to change the background-color.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition Property - Examples
</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
transition: width background 6s ease-in .6s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style = "text-align:center;">
<h1>Start with EDUCBA</h1>
<h2> Demo on Transition Property</h2>
<div>
<p>transition property is assigned on width and background</p>
<p>It takes duration of 6 sec</p>
<p>transition-timing-function: ease-in</p>
<p>With some delay</p>
</div>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 80vh;
justify-content: center;
align-items: center;
}
.boxmove {
font-size: 2em;
font-family: initial;
border: semi-solid;
background-color: blue;
border-radius : 5px
padding: 0.3em 3em;
transition: background-color , border-radius 0.8s linear;
}
.boxmove:hover {
background-color: #ff7b29;
border-radius: 60%;
}
</style>
</head>
<body>
<button class="boxmove">Pointing the element and transition is done by changing the color and shape</button>
</body>
</html>Output:
When you hoven the box changes its shape .
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.cir {
border-radius: 55%;
left: calc(55% - 7.25em);
top: calc(55% - 11.5em);
transform-origin: 60% 11.5em;
width: 11.5em;
height: 11.5em;
position: absolute;
box-shadow: 0 2em 1em rgb(238, 130, 238);
}
.one,
.three {
background: rgb(10, 90, 205);
transition: background 1s ease-in;
}
.two,
.four {
background: rgb(135, 150, 138);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(120deg);
}
.four {
transform: rotateZ(-130deg);
}
.cir:hover {
background: rgba(255, 99, 71, 1);
}
</style>
</head>
<body>
<div class="sealed">
<div class=" cir one"></div>
<div class=" cir two"></div>
<div class=" cir three"></div>
<div class=" cir four"></div>
</div>
</body>
</html>Output:
From the related CSS code, we would spot the transitions to do more sophisticated animations. When you hover over the circle the circle moves with the background colour change.
Conclusion
As we all knew the transitions make a great job of doing visual interactions from one state to another and multiple states are done when more control is needed. And it’s the simplest way to do animations in CSS also without using JavaScript it benefits web designers and front-end developers.
Recommended Articles
This is a guide to CSS Transition Property. Here we also discuss the definition and how does transition property works in css along with different examples and its code implementation. You may also have a look at the following articles to learn more –
