What are Transitions in CSS?
Transitions are used to change the properties or the style of an element.
The transition is kind of like the “animation” that occurs between the two states of the element. Although CSS animations are a different thing. Which is confusing. Sorry.
Transitions and animations are great for grabbing people’s attention (for example in a banner ad) or for enhancing User Experience (UX). In other words, transitions look nice.
Transitions are the bit that happens when an element, like a box for example, changes size to a new state.
Original State —Transition—> New State
Box with 200px width —user clicks to cause transition—> Box with 400px
Gif Source
You might use transitions for example, to dictate how an element changes when it is “hovered” over with a mouse pointer.
With the code above, the element given the class of “box”, will change from 200px width to 400px when someone hovers over it with their mouse.
The code above will have no transition, it will just change from one to the other.
With transition-property and transition duration added, the box will move gradually from 200px to 400px, over the course of 1 second.
Transition-duration can be set in ms (milliseconds) or seconds in CSS, but Javascript, only uses ms.
Transition Properties
To create a CSS transition, you need to specify the transition-property and the transition duration.
The transition-property dictates, what is going to change, for example, the width and height:
transition-property: width, height;The transition duration dictates the length of time a transition should take, e.g.
transition-duration: 2s;
Transition-delay, specifies how long a transition should take to being, and transition-timing-function dictates how fast and slow the transition should occur (more info below).
CSS Transition Examples
In the example below, the box is given a class of “box” inside the HTML.
In the CSS sheet, this class is selected with the dot/period/fullstop – “.box” and given styles that include 300px height and width.
Here the box is also given the transition-duration of 350ms and the transition-property style states that the background is what will change.
The .box:hover dictates how the style will change when the box is hovered over with a mouse pointer. In the example, it will rotate 45 degrees and change color.
The
transition-propertyproperty specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).Tip: A transition effect could typically occur when a user hover over an element.
Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
https://www.w3schools.com/cssref/css3_pr_transition-property.php
Here’s a real-life example of a transition:
You can just write “all”, but best-practice is to state all of the properties you want to change with your transition:
Transition-Timing-Function
By default, your transitions will “ease” into the new styles.
ease
Ease is the default value. Ease increases in velocity towards the middle of the transition, slowing back down at the end.
linear
Transitions at an even speed.
ease-in
Starts off slowly, with the transition speed increasing until complete.
ease-out
Starts transitioning quickly, slowing down the transition continues.
ease-in-out
Starts transitioning slowly, speeds up, and then slows down again.cubic-bezier(p1, p2, p3, p4)
Cubic-Bezier
If you really want to, you can also define your own transition speeds using cubic-bezier. The easiest way to do this is to use a generator.
Image Source
Testing Transitions with Chrome Dev Tools
You can “visualise” transitions, using Inspect Element/Chrome Developer Tools and clicking on “ease” or the transition-property you’ve created/stated:
You can also play around with rotation
Remember to copy the code before you exit Chrome dev tools.
Warning about CSS Transitions
If you can limit transitions to transforms and opacity.
A browser can use a graphics card for transforms and opacity.
For other transitions, you can create transitions which will look strange and very jerky for some users. This is especially true if you set the transition-property to “all”, rather than specific elements.
Be careful when using transitions on box shadows, borders, backgrounds etc.