CSS Transitions: A Detailed Guide With Examples

Alex Anie

Posted On: April 2, 2024

view count128410 Views

Read time19 Min Read

Modern web design isn’t just static pages. It’s about creating interactive experiences for visitors. This includes effects like buttons that change color on hover, pop-up windows (modals) that appear, and elements that fade in or out as you scroll.

These dynamic elements are often in different states. CSS transitions allow you to smoothly change an element’s appearance between these states (hover, active, and focus). Using these state transitions effectively can create a more engaging and user-friendly website experience, guiding visitors and helping them focus on what matters most.

With the help of CSS transitions, an element’s change of state doesn’t have to be laggy, as we can apply micro-animations that enable smooth and easy changes of state as the user interacts with the element.

In this blog, we will explore what CSS transitions are with detailed examples of each property and how to use them to create stunning effects on the web.

TABLE OF CONTENTS

What are CSS Transitions?

CSS transitions allow the smooth changes of CSS property values over a specified period of time.

By default, Cascading Style Sheets (CSS) is a declarative language; any style applied to a certain element takes immediate effect. This is very useful when we only need to style how the web page looks or feels when it first loads on the page.

However, some elements might require changes (state), which might be for aesthetics or to indicate that an element is clickable, such as a button, forms, cards, navbar links, user profile, or modal that performs a specific function.

For example, the LambdaTest home page shows interesting use cases for transitions.

A simple use case showing how CSS transition can be applied to different web elements, components, ranging from buttons, forms, cards, navbar links, user profiles, modals, etc. CSS transitions can be applied to these elements for smooth and easy state change while users interact with them.

How Does CSS Transition Work?

Transition works by specifying which CSS property or properties should be changed when a user trigger occurs, which results in a change in state. This change in state moves from the initial state to the final state.

trigger occurs

CSS transition only takes place when a user trigger occurs and is commonly used with hover effects. However, other CSS pseudo-classes such as focus, active and JavaScript events can trigger CSS transitions.

Here is an example below that shows how the transition effect applies to hover, active, and focus state.

transition effect applies

HTML:

CSS:

From the code sample above, we have two separate elements created. The first element is an input tag that allows us to provide an email address, and beside it, we have a submit button that sends the email to a database.

The input tag is set to a focus state of box-shadow, which helps indicate that the input tag is activated. While on the submit button, the background is removed, leaving only the outline properties. This action is seen when we hover on the button element.

However, hover is not enough to set interactivity on a button, so we set the active state to transform:translateY(2px) to position the button down when a user clicks on it, and the box-shadow is completely removed. This gives the button element a bounce effect when activated (clicked).

The second input, like the first, possesses identical style properties; however, it lacks any applied transitions, resulting in lag compared to the first one.

See the Pen
active-focus-hover by Ocxigin (@ocxigin)
on CodePen.

CSS Transition Properties (Longhand)

The CSS transition longhand properties are used to determine which properties should be transitioned, the time frame the transition should occur, the flow of the transition, and whether or not the transition should wait before it starts to apply the transition effect.

The CSS transition longhand properties consist of four properties, which include;

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Example:

transition-property

The CSS transition-property is a longhand property used to set properties that need to be transitioned. This property takes one or more properties as values and is separated by a comma.

The property(ies) specified in the transition-property are transitioned. However, the all keyword can be used to transition every property applied to the element.

Example:

Here, the first element has no transition applied. As a result, the width size bumps as it grows, while the second element only has a change of background-color transition on hover, the third element, on the other hand, has background-color and scale on transition, and the fourth element has the all property set on transition.

HTML:

CSS:

See the Pen
transition-property by Ocxigin (@ocxigin)
on CodePen.

transition-duration

The CSS transition-duration sets the time interval that the transition needs in order to move from its initial state to the final state.

number is measured

The transition-duration property takes a number value. This number is measured in seconds (s) and milliseconds (ms), where 1000ms means 1s (one second) and 0.5s (zero point five seconds) means 500ms.

By default, the value is set to 0s, which means no transition will occur.

It’s common to specify one value. However two or more values can be specified in one declaration. This is used when we specify different transition-duration values based on the multiple properties defined in the CSS transition-property.

Example:

Here, from the browser preview each card moves according to the transition-duration set on them.

HTML:

CSS:

JavaScript:

See the Pen
transition-duration by Ocxigin (@ocxigin)
on CodePen.

transition-timing-function

The CSS transition-timing-function property sets the speed of the transition curve based on the value defined on the transition-duration property.

The transition-timing-function takes in keyword values that determine how fast or slow the transition should start, end, or move in between the transitions.

Example:

Values of transition-timing-function

With the transition-timing-function values, we can specify the flow and speed of the transition curve as the element transitions.

additional value

Source

These values are mainly keyword values with an additional value called cubic-bezier()
for specifying custom values.

linear

The linear value moves the transition along a straight line from the initial state to the final state. There is simply no curve along the linear graph, and it’s equal to the same cubic-bezier(0.0, 0.0, 1.0, 1.0).

ease

ease
The ease value is the default value. When specified, it starts faster and then moves slowly towards the middle and to the end. It is equal to the same cubic-bezier(0.25, 0.1, 0.25, 1.0).

ease-in

ease-in
The ease-in value starts slowly and then moves faster towards the end. It is equal to the same cubic-bezier(0.42, 0, 1.0, 1.0).

ease-out

ease-out
The ease-out value starts fast and then moves slowly towards the end. The ease-out is the direct opposite of the ease-in timing-function. It is equal to the same cubic-bezier(0, 0, 0.58, 1.0).

ease-out value starts

ease-in-out

The ease-in-out value starts slowly and then moves fast towards the middle and then moves slowly again towards the end. It is equal to the same cubic-bezier(0.42, 0, 0.58, 1.0).

cubic-bezier()

cubic-bezier()

The cubic-bezier() function value sets a custom timing function on transitions. The values of a cubic-bezier are very complex and are usually generated instead of being created by the author. This makes cubic-bezier values unique and responds differently to transitions.

To generate a cubic-bezier, set the transition and specify any of the keyword timing functions, For example, ease. Then open your DevTools by clicking F12 on Windows or Shift + ⌘(ctrl) + J on macOS.

This should open up your DevTools, then do the following;

  1. Select the Elements tab.

    2. Elements

  2. Click on the inspect icon and then select the element with a transition applied to it.

    3. inspect icon

  3. Navigate to the Styles panel.

    4. Styles panel

  4. Click on the ease icon. This should open up a dialog box.

    5. ease icon

  5. Drag and adjust the anchor points on the curve to change the value to a cubic-bezier.

    6. cubic-bezier

  6. Copy the generated cubic-bezier code and paste it to replace the ease timing-function in your text editor.

    7. generate a cubic-bezier

    The DevTools cubic-bezier panel is a very convenient way to generate a cubic-bezier.

    The browser preview below shows how the transition-timing-function values affect the transition speed.

    From the browser preview, each list item is set to a different transition-timing-function values.

    HTML:

    CSS:

    See the Pen
    transition-timing-function     by Ocxigin (@ocxigin)
    on CodePen.

    steps()

    The steps() function is another value of the transition-timing-function; unlike the previous values that follow a certain acceleration curve in a smooth direction, the steps() function does something different instead; it jumps from one point to another based on the steps provided.

    For example, if a value of 6 is parsed as an argument into the steps() function, it will jump six times from the initial state to the final state. However, if a different value is parsed, it will jump based on the number of that value parsed.

    The steps() function takes in two arguments, the first being the number of steps the transition should jump while the send argument is optional, but when specified, it determines how the jump behaves during the transition.

    Syntax:

    The steps optional argument includes; jump-start, jump-end, jump-both, jump-none, start, end, step-start, and step-ends. This determines how the jump behaves during the CSS transition.

    Now let’s see what the steps look like when implemented.

    From the browser preview, we have 10 elements, with a size of 90px width each and a box element of 90px by 90px pixels width and height respectively.

    The box element is set to jump 9 times across each element, so a max value of transform: translateX(810px) is assigned to the target element when the state is changed. However, the 810px is 90px multiplied by 9. This will make the box element jump 9 times at 90px per frame.

    If you are wondering why 9 times instead of 10, since we have 10 elements, well the box will start jumping from the second frame (second element), which is 90px apart from the first one.

    See the Pen
    transition-timing-function steps()     by Ocxigin (@ocxigin)
    on CodePen.

    Specifying a lower or higher value instead of 9 with the same max value of 810px at state change, the jumping transition will overlap and not jump in place.

    HTML:

    CSS:

    So, we’ve seen what the steps() function can do. However, in a real-world project, you won’t necessarily be animating elements over other groups of elements.

    So here is a good use case where the steps() function can be useful.

    Below is a simple stop motion effect, whereby we move the group of eight static images of size 90px each and offset the background position by -630px on the X-axis and 0 on the Y-axis, and then we set the steps() to jump seven times over each image creating a frame by frame animation (stop motion).

    This is a cool way of creating an animation in CSS using the steps() function.

    HTML:

    CSS:

    See the Pen
    stop motion in CSS     by Ocxigin (@ocxigin)
    on CodePen.

    transition-delay

    The CSS transition-delay sets how long the transition should wait before the effect is transitioned.

    By default transition-delay is set to 0, meaning no delay is specified. Transition delay, accepts number values with a time unit of s (seconds) and ms (milliseconds) respectively.

    From the browser preview, the red circle does not wait, it kick-off immediately because no delay was set, while the orange circle has to wait for two sections before the transition kicks off. The blue and purple circles wait 500 milliseconds and 200 milliseconds, respectively.

    HTML:

    CSS:

    See the Pen
    transition delay in css     by Ocxigin (@ocxigin)
    on CodePen.

    CSS Transition Properties (Shorthand)

    The CSS transition is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

    With these shorthand properties, we can specify all transition longhand properties in a single declaration. This is very useful for writing short, simple, and maintainable code.

    Example:

    Let’s look at a real-case scenario where the transition shorthand property can be used.

    From the browser preview, each button has a transition effect specified by the transition shorthand property, which makes the social icons move and rotate smoothly within the buttons.

    For example, the shape before the pseudo-element is set to a transition of 500ms ease.

    shape before the pseudo-element is set to a transition of 500ms ease

    While on Facebook, before the pseudo-element is set to a transition of opacity 0.5s ease-in, transform 0.5s ease-in, this is a perfect example of how two or more properties can be declared in a single line using the transition shorthand property.

    the pseudo-element is set to a transition of opacity

    For more understanding, try the code example below:

    HTML:

    CSS:

    See the Pen
    Adding Transition to font awesome icons     by Ocxigin (@ocxigin)
    on CodePen.

    In the next section, we will look at how to apply the CSS transition effects.

    How to Apply CSS Transitions?

    Now, let’s explore other techniques to create stunning and staggering effects with CSS transitions.

    CSS Transitions on Cards

    Adding transitions to card elements can improve the user experience. Subcard components such as buttons, images, and pop-ups can all be transitioned for smooth and easy user interaction.

    Here, we build a card component with a user profile. Each card has an image to display the image of the user, the name and about section, and links for social media.

    We have used LT Browser to render the output on different device viewports.

    LT Browser enables developers and testers to perform responsive testing and debugging. It simulates various mobile experiences on viewports for mobile, tablet, desktop, and laptop. Each viewport comes equipped with dedicated Chrome DevTools, allowing you to inspect and fix issues specific to each mobile layout. This streamlines the testing process and empowers you to deliver a flawless mobile experience.

    DOWNLOAD LT BROWSER 2.0 Download LT Browser 2.0

    Beyond responsiveness, LT Browser helps you account for real-world scenarios. Test your website’s performance under different network speeds (fast 3G, slow 3G) to ensure it functions smoothly even with limited bandwidth.

    To make things even more interactive, the transition is applied to each button, image, and pop.

    HTML:

    CSS:

    See the Pen
    Card Transition in CSS     by Ocxigin (@ocxigin)
    on CodePen.

    CSS Transitions on Images

    Images are important resources on the web and help to convey useful information that can not be described with text or audio. With CSS transitions, we can add some cool effects on how users interact with images on the webpage.

    From the above browser preview, we set four different transitions on the images on hover. The first image rotates and scales, the second is transitioned from a square to a circle, the third is an overlay of the pseudo-element on transition, while in the fourth image, we scale out the image from the outside.

    HTML:

    CSS:

    See the Pen
    Image Transition in CSS     by Ocxigin (@ocxigin)
    on CodePen.

    CSS Transitions on Multiple Elements

    Here, we apply multiple transitions to elements within a card component. This is very useful where we need to apply the transition to different elements within the same card component.

    HTML:

    CSS:

    See the Pen
    Multiple Element Transition     by Ocxigin (@ocxigin)
    on CodePen.

    CSS Transitions on Navbars

    Applying transitions on the navbar is very common in modern web design. Navbars play an important role in how users navigate pages on websites.

    We can add transitions on menu items that respond to user events like:

    • hover
    • active
    • focus
    • visited
    • scroll
    • click

    HTML:

    CSS:

    See the Pen
    Navbar Transition     by Ocxigin (@ocxigin)
    on CodePen.

    Best Practices to Implement CSS Transitions

    Applying transition not appropriately might lead to poor user interaction. However, there are best practices that can be implemented for the smooth transitioning of properties from the initial state to its final state for better user interaction.

    In this section, we’ll explain why and where transitions are meant to be defined within your CSS rules. To prevent lagging animation that might lead to poor user interaction within the webpage.

    Hover States

    Transitions should not be applied directly on the hover state as this will lead to an unpleasant user experience. As soon as the user hovers out of the element, a sudden break will occur, stopping the transition from rendering.

    Consider the example below:

    Here, from the browser preview, the first element breaks due to the hover being defined on the hover state, so as soon as you hover out, the transition stops. However, on the second element, the transition continues to fade out as soon as you hover out of the element.

    Best Practices to Implement CSS Transitions

    Also, avoid declaring transitions directly on the hover state as indicated above, instead, declare it on the element.

    HTML:

    CSS:

    See the Pen
    Performance Consideration: Hover State     by Ocxigin (@ocxigin)
    on CodePen.

    Layout

    Applying CSS transitions on properties such as width, height, visibility and display can have a negative impact on elements around them.

    Properties such as width and height affect the structure of the page. This is because they determine the size of the element in the Document Object Model (DOM) tree. Applying a transition to width and height will result in the browser computing a new position for the surrounding element.

    The visibility property will remain in the DOM it will not have the time to transition if set to hidden.

    Here, the example above from the browser preview shows surrounding elements can be affected by a change in the size of a particular element.

    When transition is applied to elements that affect the stacking order of the DOM or their surrounding element. The browser computes a new position to the surrounding element by moving the surrounding element to a new position.

    HTML:

    CSS:

    See the Pen
    Best practice Layout one     by Ocxigin (@ocxigin)
    on CodePen.

    To avoid elements from bumping or flickering into each other, try implementing elements that are easily interpolated.

    Consider the example below:

    Here, the width, height, and display properties have been replaced with the CSS transform property. The transform property does not affect the stacking context of the surrounding elements. This enables smooth transitioning on the element being transitioned.

    Also, the visibility property is replaced with the opacity property for easy fading.

    HTML:

    CSS:

    See the Pen
    Performance Consideration: Layout 2     by Ocxigin (@ocxigin)
    on CodePen.

    Duration and Delay

    Duration is the time taken for a particular transition to complete, while delay is the time the transition needs to wait before it starts transitioning.

    However, when the transition takes too much time to complete or wait before it starts transitioning. Users might lose interest in interacting with the website due to being perceived as slow.

    A transition duration of 5 seconds:

    A transition delay of 5 seconds:

    transition delay of 5 seconds

    The above code sample shows a transition duration and delay of five seconds each. This type of transition usually leads to low user interaction due to being perceived as slow. Transitions are meant to improve the user’s interaction, so they must be used judiciously.

    The example above provides a visual guide on how duration and delay impact the speed of the transition.

    See the Pen
    transition delay in css     by Ocxigin (@ocxigin)
    on CodePen.

    Browser Compatibility of CSS Transition

    The CSS transition property has good support on major browsers and does not require vendor prefixes.

    Browser Compatibility of CSS Transition

    Source

    However, CSS transitions might not behave exactly the same way on every browser. Therefore, it’s important to ensure browser compatibility of websites that use CSS transition properties. For this, you can leverage cloud-based testing platforms like LambdaTest.

    It is an AI-powered test orchestration and execution platform that allows you to test your website on a remote test lab of 3000+ real browsers and operating systems. This helps identify any inconsistencies in how your transitions render across different platforms, ensuring a consistent user experience.

    Watch the video below to learn how to perform Real Time Browser Testing using LambdaTest.

    Catch up on the latest testing tutorials – subscribe to the LambdaTest YouTube Channel for quick updates.

    Conclusion

    CSS transitions allow the smooth changes of CSS property values over a specified period of time. It consists of four longhand properties which include transition-property, transition-duration, transition-timing-function, and transition-delay.

    The shorthand property transition sets the longhand properties of CSS transition in a single declaration. This helps to write small, clean, and maintainable code.

    Using CSS transitions can improve the user experience of the web pages and how users interact with elements and web icons.

    Frequently Asked Questions (FAQs)

    What are CSS transitions best used for?

    CSS transitions are best used for creating smooth animations or effects when there’s a change in CSS properties, such as color, size, or position.

    What is the difference between transition and transform in CSS?

    The difference between transition and transform in CSS is that transition is used to smoothly animate changes in CSS properties over time, while transform is used to modify the appearance and position of elements without affecting the layout flow.

    Alex Anie

    A Front End Technical Writer. I write blogs on Front End Technologies, such as HTML, CSS, JavaScript. When I am not coding, I enjoy watching tutorials and listening to twitter spaces. I live in Lagos, Nigeria

    See author's profile

Author Profile Author Profile Author Profile

Author’s Profile

Alex Anie

A Front End Technical Writer. I write blogs on Front End Technologies, such as HTML, CSS, JavaScript. When I am not coding, I enjoy watching tutorials and listening to twitter spaces. I live in Lagos, Nigeria

Blogs: 16



linkedintwitter

Test Your Web Or Mobile Apps On 3000+ Browsers

Signup for free