Animations have become an essential part of web design, and developers now use these to beautify content on websites. Before the release of CSS3, front-end developers had to perform animations with JavaScript, which wasn't an all pleasing process. Still, with the introduction of CSS animations, developers can now perform animations with ease.
In this article, I'm going to introduce you to CSS Transitions, walk you through the process of creating simple CSS animations, explain the Transition shorthand properties, and it's value.
By the end of this article, you would be able to perform simple animations using Transition, so put your seatbelts on it's going to be a wonderful ride.
What is Transition?
The transition property is a shorthand property that allows elements to change value over a given duration rather than having these changes occur immediately. By knowing the right values to specify, you can create stunning animations.
transition:[transition-property] [transition-timing-function] [transition-delay] [transition-duration]
Properties of Transitions
The transition property can take some values, namely:
- Transition-property
- Transition-timing-function
- Transition-delay
- Transition-duration
Transition-Property
This specifies what properties to change during the animation.
Let's take a look at two examples that showcase the transition-property value.
Example 1
img{
width:250px;
height:200px;
transition:all 1s;
}
img:hover{
transform:scale(1.1);
}
The above example performs an increase in the size of the image by 1.1. Now let us look at some of the properties we defined, first off we have the width and height defined, and then we defined the transition property which has TWO values set all and 1s(seconds). All performs transitioning on all the properties that were defined for the image tag in this case width and height, and 1s specifies the duration it would take to perform this transition.
The img:hover style specifies what kind of changes to be made when the mouse is hovered on the image, in this case, a scale of 1.1, which slowly increases the image size on hover.
Example 2
div{
width:400px;
height:200px;
background-color:blue;
transition:background-color 1s;
}
div:hover{
background-color:red;
}
In the example above, the transition property takes two values as well, but this time we gave It a specific property to animate, which is the background-color. We can now see that the transition property specifies either to animate all properties or just a particular property, In our first example, we used ALL as a value for the transition, which animates all of the properties of the element, this example only changes the background color of the div to red with a 1-second delay.
Transition-timing-function
This describes how the transition would proceed over the duration.
div{
width:400px;
height:200px;
background-color: blue;
transition:background-color 1s ease-in;
}
div:hover{
background-color: red;
}
The code above performs the same transition as our last example, but this has a value of ease-in. This is a transition value called timing-function, which describes how a transition will proceed over a duration, thereby allowing a transition to change speed during its course.
Transition-delay
This specifies how long to wait before the transition starts.
div{
width:400px;
height:200px;
background-color:blue;
transition: background-color 1s ease-in 500ms;
}
div:hover{
background-color:red;
}
The example above performs the same transition as our last two examples, but this has a delay value. The delay value specifies the time to wait before the transition starts; in this case, 500ms(milliseconds).
Transition-duration
This property specifies how long the animation would last. We already defined the duration value in all the previous examples as 1s, which states how long the transition would go on.
transition:background-color 1s ease-in;
NOTE:
- Both the transition duration and delay can be specified using valid time values (seconds, milliseconds).
- Transition duration should be stated before the transition delay because the browser recognizes the first valid time value as the duration.
Conclusion
The release of CSS3 made it way easier for developers to perform beautiful animations, and I hope this article would help get you up to speed on what you need to know on TRANSITIONS .