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;
}
}
In this way, a complete signature board, or drawing board, is realized:
The complete code implementation, and adding the reset
function using CSS, you can click here: CodePen Demo -- Pure CSS signature
Like this, an effect from my friend alphardex uses the above techniques to superimpose blending modes and filters to achieve:
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.
Top comments (2)
Good job bro ! what amazing ideas :)
Thank you!