Frontend Canteen
Published in

Frontend Canteen

Amazing CSS transition tips and details

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 transitions. 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 transition do not support transition in some specific states. Very typical is height: autoand width: auto.

In the article CSS Tricks: Dynamic Height Transition Animation , such a scene 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;
}
}

The property heightis clearly set transition, but the transition animation is not triggered, it is just directly expanded in one step:

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

For this scenario, we can use max-heightto hack.

Here is a very interesting little trick. Since it is not supported height: auto, we will find another way to use the characteristics of max-heightto achieve dynamic height scaling, such as:

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

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

For specific details, you can look at CodePen Demo — the height property transition unwork

Transition can separately control each property

Let’s continue. In transition, we can use transition: all 1s linearto 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: 0.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

Therefore, by reasonably controlling each attribute, various interesting effects can be obtained in combination .

Dynamic change transition-duration

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

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 the element, change the duration of the transition animation of the element’s transition-durationfrom 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 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 the convenience of illustration, I added each grid with a border, in fact, the background and grid are white:

To achieve the signature effect, we add a hover event to each g-item, and change the current grid background color when hovering. Also, the most important thing is to set a very large transition-duration in the normal state, and a very small transition-duration when hovering, with the following codes.

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

Take a look at the effect:

Wow, What happened? When the mouse hovers up, the background color is quickly changed because oftransition: 0s , and when the hover effect leaves and the transition: 999999stakes effect again, the black color will fail at a very, very slow speed, so slow that you can't feel it. It's changing.

Of course, if we want to realize the signature, there is still something missing at present. We need to realize that when the mouse hovers over the drawing board, the background color of the element will not start to change immediately. Only when the mouse is pressed (the :activestate ), does it start to follow the mouse track change 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 is higher z-indexthan that of the canvas. When the mouse hovers over the canvas, it is actually hovering over the mask layer. When the mouse is pressed, an :activeevent is triggered. , add an :activceevent 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;
}
}

In this way, a complete signature panel is implemented by pure CSS:

The complete code implementation, and the use of CSS to add the resetfunction , you can click here to have a try: CodePen Demo -- Pure CSS signature

Like this, an effect from my friend alphardex takes advantage of the above tricks and superimposes blend modes and filters to achieve:

CodePen Demo — Snow Scratch

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.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that’s all for this article, I hope it helps you. :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store