Coco

Posted on Jul 29, 2022

Amazing CSS transition tips and details

#webdev #css #javascript #html

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:

<div></div>

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

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

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, such a scenario is mentioned:

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

{
    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:

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:

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

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

For specific details, you can see -- CSS tricks: dynamic height transition animation

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:

{
    // 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:

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);
}

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:

<div></div>

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:

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:

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;
}

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

You can click here for the complete demo: CodePen Demo -- Button border animation effect with transition-delay

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:

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:

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.

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:

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:

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

Take a look at the effect:

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:

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

.g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    &:active {
        display: none;
    }
}