Amazing CSS transition tips and details
Tags: webdev, css, javascript, html
Published: 2022-07-29 08:42:27

---
title: Amazing CSS transition tips and details
published: true
description: 
tags: webdev, css, javascript, html
# cover_image: https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/275e6c90a40d4ecf9e92310c3ee9db44~tplv-k3u1fbpfcp-watermark.image
# Use a ratio of 100:42 for best results.
---
In CSS, the transition property is used to specify adding transition effects to one or more CSS properties.

The most common usage is to add a transition to an element, so that when one of its properties changes from state A to state B, it is no longer very direct and obtrusive, but with a tween animation.

For example:

```HTML
<div></div>
```

```CSS
div {
    width: 140px;
    height: 64px;
    transition: .8s transform linear;
}
div:hover {
    transform: translate(120px, 0);
}
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f14d4e67ff4c4113bca95172d835a9c6~tplv-k3u1fbpfcp-watermark.image)

Of course, in addition to the above basic usage, there are actually some very interesting details and interesting usages of CSS transition. Let me explain them one by one.

## Not all properties support transitions

Not all properties support transitions. Similar to animation, here is a list of all properties that support transitions -- [CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)

Of course, sometimes, there are more exceptions. Some properties that support transitions do not support transitions in certain states. Very typical are `height: auto` and `width: auto`.

In the article [CSS tricks: dynamic height transition animation](https://github.com/chokcoco/iCSS/issues/91), such a scenario is mentioned:

The dynamic height transition animation of the element is invalid. The pseudo code is probably like this:

```CSS
{
    height: unset;
    transition: height 0.3s linear;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}
```

Obviously set `transition` for the `height` property, but the transition animation is not triggered, but unfolds directly in one step:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c07d720ff5f414d8bee106343a9db73~tplv-k3u1fbpfcp-watermark.image)

The reason is that **CSS transitions do not support changing the height or width of elements with auto**.

For this scenario, we can use the `max-height` to hack.

Here is a very interesting little trick. Since `height: auto` is not supported, we will find another way to use the feature of `max-height` to achieve dynamic height scaling, for example:

```CSS
{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4a52e6fbf9b4e66bcaa8b71996243c2~tplv-k3u1fbpfcp-watermark.image)

For specific details, you can see -- [CSS tricks: dynamic height transition animation](https://github.com/chokcoco/iCSS/issues/91)

## Transition can separately control each property

Let's continue. In transition, we can use `transition: all 1s linear` to uniformly add transition effects (time and easing functions) to all transition-supporting properties below the element.

At the same time, we can also finely control each attribute separately:

```CSS
{
    // can be
    transition: all 1s linear;

    // can also do this
    transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}
```

And, like animations, each transition supports delayed triggering:

```CSS
div {
    // Trigger the transition with a delay of 1s, and the transition animation time is 0.8 seconds
    transition: .8s transform 1s linear;
}
div:hover {
    transform: translate(120px, 0);
}
```

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da918a24c5f64ef38a3d12db29ac7825~tplv-k3u1fbpfcp-watermark.image)

It can be seen that whether it is a transition trigger or a transition reset, it will wait for 1 second before triggering.

Using this technique, we can achieve some combination of transition effects. First, we implement such a transition animation of width and height change:

```HTML
<div></div>
```

```CSS
div {
    position: relative;
    width: 200px;
    height: 64px;
    box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0; left: 0; width: 0; height: 0;
    box-sizing: border-box;
    transition: width .25s, height .25s, border-bottom-color;
    transition-delay: .25s, 0s, .25s;
}
div:hover::before {
    width: 200px;
    height: 64px;
    border-left: 3px solid #00e2ff;
    border-bottom: 3px solid #00e2ff;
}
```

We control the height, width, and lower border of the pseudo element of the element respectively, and set a delay of 0.25 seconds for the width transition animation and the color animation of the lower border, so that the height of the element will be transitioned first, due to the overall transition animation. The world time is also 0.25s, so after the height transition animation ends, the width transition animation starts, and the color of the lower border changes.

In this way, their transition animations can be linked together and reflected on the border of the element to see the effect:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/641882da53424c62accf2512319864ce~tplv-k3u1fbpfcp-watermark.image)

Using the same principle, we also use another pseudo-element of the element, but their animation world needs to add 0.5 seconds to the whole, and it will not be executed until the above transition animation is executed:

```CSS
div::after {
    right: 0;
    bottom: 0;
}
div:hover::after{
    transition: height .25s, width .25s, border-top-color .25s;
    transition-delay: 0.5s, 0.75s, 0.75s;
    width: 200px;
    height: 64px;
    border-top: 3px solid #00e2ff;
    border-right: 3px solid #00e2ff;
}
```

![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c7c248465ba464a9819a0082280bb7c~tplv-k3u1fbpfcp-watermark.image)

In this way, we can combine the transition animations of the two pseudo-elements to get a complete border animation as follows:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46fb29fe1d354aa29df6685a6d667ffe~tplv-k3u1fbpfcp-watermark.image)

You can click here for the complete demo: [CodePen Demo -- Button border animation effect with transition-delay](https://codepen.io/Chokcoco/pen/GwKOem)

**So, by controlling each attribute reasonably, you can combine various interesting effects**.

## Dynamically change `transition-duration`

There is also a very interesting trick, we can use some pseudo-classes of the element to dynamically change the `transition-duration` of the element.

for example:

```CSS
div {
    width: 140px;
    height: 64px;
    border: 2px solid red;
    transition: 3s all linear;
}
div:hover {
    transition-duration: .5s;
    border: 2px solid blue;
}
```

When the mouse hovers an element, change the duration of the transition animation of the element `transition-duration` from 3s to 0.5s, so that when the element is hovered, the duration of the transition animation is 0.5s, but the duration of the transition reset But it is 3s:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00c41f72773c4bc2a0d7c8d88024ccd2~tplv-k3u1fbpfcp-watermark.image)

Using this little trick, we try to create some interesting effects.

### Signature Panel Implemented in Pure CSS

Using the above-mentioned tricks, we can implement a pure CSS signature panel.

First of all, in a container with a height and width of 500px, a 100x100 HTML grid layout is implemented, using flex and grid. For convenience, I use the Pug template engine.

```HTML
div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item
```

For convenience, I added a `border` to each grid, in fact, the background and grid are white:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a152c3fadb0445cdacf576de445a2a3a~tplv-k3u1fbpfcp-watermark.image)

In order to achieve the signature effect, we add a hover event to each grid `g-item`, and change the background color of the current grid when hovering. At the same time, the most important thing is to set a very large `transition-duration` in the normal state, and set a very small `transition-duration` in the hover time, the pseudo code is as follows:

```CSS
.g-item {
    transition: 999999s;
}
.g-item:hover {
    background: #000;
    transition: 0s;
}
```

Take a look at the effect:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/858296a39a7f4294b53e9b1712666469~tplv-k3u1fbpfcp-watermark.image)

This is achieved. When the mouse hovers up, the background color is quickly changed because of `transition: 0s`, and when the hover effect leaves, `transition: 999999s` takes effect again, and the black color will be a very, very slow. The speed is ineffective, so slow that you can't feel it changing.

Of course, if we want to realize the signature, there is still something missing. We need to realize that the background color change of the element will not start immediately when the mouse hovers over the drawing board. Only when the mouse is pressed (maintaining the `:active` state) will it start. Follow the mouse track to change the color. When the mouse stops clicking, it stops drawing.

There is a clever way to achieve this. We superimpose a layer of div on the canvas. The level `z-index` is higher than the canvas. When the mouse hovers over the canvas, it is actually hovering over this mask layer. Press to trigger the `:active` event, add a `:activce` event to the element, and remove the mask layer.

The pseudo code is as follows:

```HTML
div.g-wrap
div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item
```
```CSS
.g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    &:active {
        display: none;
    }
}
```

In this way, a complete signature board, or drawing board, is realized:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/275e6c90a40d4ecf9e92310c3ee9db44~tplv-k3u1fbpfcp-watermark.image)

The complete code implementation, and adding the `reset` function using CSS, you can click here: [CodePen Demo -- Pure CSS signature](https://codepen.io/Chokcoco/pen/gOLbrYJ)

Like this, an effect from my friend [alphardex](https://juejin.cn/user/4353721774401623) uses the above techniques to superimpose blending modes and filters to achieve:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6480eb7d48054ac79e15a1ef595fa096~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- Snow Scratch](https://codepen.io/alphardex/pen/BaBevXm)

How about it? Is it a very interesting CSS trick? I hope you will enjoy this wonderful technique achieved by CSS transition.

## Finally

More wonderful CSS technical articles are summarized in my [Github -- iCSS](https://github.com/chokcoco/iCSS).

And maybe you will love my [CodePen](https://codepen.io/Chokcoco/), which has a large number of amazing CSS effects.