Multiple transition delays

Today I was working with transition-delay to make something expand before it grows in height. I wanted to change the delay when a class was added and removed.

Transition delay always has to have a time unit - even when zero.

To give you an example of this, the below code makes the width and height have different transition delays:

div {
width: 50vmin;
height: 50vmin;
background: red;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-property: height, width;
transition-delay: 0s, 0.5s;
}
div:hover {
width: 80vmin;
height: 80vmin;
transition-delay: 0.5s, 0s;
}

See an example on Codepen:

See the Pen Transition delay by mikestreety (@mikestreety) on CodePen.

This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

  • HTML 5 collapsable information - works in a Github/Gitlab issue

    Posted on 10th May 2017.

    It may be that you wish to include a lot of information in a Github issue (or anywhere else on the web that allows HTML) but don't want the code/error to fill out the page. Luckily, there is a way to collapse it using latest HTML tags.

  • CSS Custom Properties - everyday applications

    Posted on 26th April 2017.

    CSS Custom properties are now supported in Edge, meaning you can use them nearly everywhere. However, there are some cases where further browser support is required. Using PostCSS we can use CSS custom properties in development while still maintaining cross browser support.

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.