Don’t be intimidated by CSS transitions! They might seem complicated if you know nothing about them, but really, they’re pretty straightforward and easy to implement. A transition animation occurs when a value of any property of an element is triggered to change — often something like this happens when you’ve implemented a hover effect. Let’s say you have a button that you want to make more transparent when it’s hovered upon, but you want there to be a gradual transition that occurs so the opacity change isn’t jarring or rigid. That’s where transition code comes in. To execute a smooth, beautiful CSS transition, all you really need is a few lines of simple CSS code.
The transition property is actually shorthand for the four transition related CSS properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The syntax of the shorthand is as follows:
selector{
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
}
It’s super important that you remember to include the transition-duration, or the duration time will be defaulted to 0s, and the transition effect won’t occur. Also — be sure to use s (seconds) to quantify duration times.
Let’s see an example of this in action. For the purposes of this example, let’s say we want to add a transition effect to the changing of the height of an div element upon hover. Here’s the code that we would need to achieve this effect:
div{
height: 100px;
-webkit-transition: height 3s;
}
div:hover{
height: 200px;
}
As you can see, we only included the transition-property and transition-duration values in the example. That’s because the other two properties are being left to their default values. If you don’t define any of the property values in the shorthand, they’ll just resort to their default. Also, be sure to use vendor prefixes with this property, as it isn’t supported by every browser.
When using the transition property, don’t forget to define the CSS property that the transition is going to apply to — if the div:hover property with the change of height for the element didn’t exist, then there would be no transition effect. If there’s more than one property that’s going to change with your transition, you can use the transition-property “all” in your transition shorthand to ensure that all of the desired transitions occur.