One of CSS3’s innovations is the ability to create transitions and animations with behaviors. CSS3 animation can be used in numerous keyframes to change an element’s appearance and behavior. An animation establishes many transition points based on distinct keyframes, whereas transitions allow you to go from one state to another.
Throughout this article, we will examine:
- transition-property in CSS
- How to Use the transition-property in CSS?
All right let’s get started!
What is transition-property in CSS?
The “transition-property” enables us to modify the property’s values smoothly according to the specified duration. It occurs when the CSS property changes its value from one to another without flashing. Depending on its state, it can be hovered or active. Now, let’s move to the syntax of the transition-property.
Syntax
There are two things you need to specify when creating a transition effect:
- Adding an effect to a CSS property.
- Set the duration of the effect.
Follow the following syntax to add a transition effect using the transition-property:
In the place of value, add an effect of transition you want to apply.
Follow the below-given syntax to add the duration effect using the transition-duration property:
Depending on your preferences, you can also add a transition delay and a timing function.
Here is an example in which we implement the slide-in transition.
How to Use transition-property in CSS?
We can use “transition-property” on any element such as div, heading, button, and many more.
By using an example, let’s see how the transition property works.
Example: How to Slide in From Left Transition in CSS?
The following example, we will create a heading <h1> inside the <div>:
<h1>
Slide in From Left Transition
</h1>
</div>
When we execute this HTML file, it will show the following outcome:
Here, we can see that a simple heading is presented. Now we will move to the CSS section, where to apply the transition property to the created container. For this purpose, we will write the following code:
width: 150px;
height: 150px;
background: goldenrod;
transition-property: width;
transition-duration: 1s;
}
The above code block serves the following functionalities:
width and height: The size of div is “150px” in width and “150px” in height.
background: The color of the div is set to “goldenrod”.
transition-property: We have set the transition property to width; through this, it will slide from left in transition.
transition-duration: “1s” or one second is the transition duration. When we move the cursor out of the div, within one second, it will go to its original state.
Note: Whenever the CSS width property changes, the transition effect will start.
Now take a new value for the width property that will be used to mouse over the div element. The size of the width property is set to “500px”. It will slide from the left-to-right when will a cursor moves onto the element, and when you move the mouse out of the element, the style will gradually return to its original state:
width: 500px;
}
After that, go to the HTML file and execute it. It will give the following output:
Having applied the transition property to the div, we can now see that it is active.
Conclusion
In CSS, for slide-in from left transition, the “transition-property” is used. You can set the effect of transition and its duration using the “transition-property” and “transition-duration” properties, respectively. With the help of an example, this article demonstrated how the transition property is used for sliding from left to right.
