In CSS, the transition property is used to specify a transition effect for one or more CSS properties.
The most common use, which is to add A transition to an element, where one of its properties goes from state A to state B, is no longer very abrupt, but with A tween animation.
Here’s an example:
<div></div>
Copy the codediv {
width: 140px;
height: 64px;
transition:.8s transform linear;
}
div:hover {
transform: translate(120px.0);
}
Copy the code
Of course, there are some interesting details and uses of CSS Transition beyond the basics. Let me explain them one by one.
Not all properties support Transition
Not all properties support Transition. Like animation, there is a list of all the properties that support transition — CSS Animated Properties
Sometimes, of course, there are exceptions. Some properties that support transition also don’t support transition in certain states. Typical examples are height: auto and width: auto.
In CSS Wizardry: Dynamic Height Transition animation, I mentioned a scene like this:
The element’s dynamic height transition animation fails, and the pseudocode looks something like this:
{
height: unset;
transition: height 0.3 s linear;
&.up {
height: 0;
}
&.down {
height: unset; }}Copy the codeThe height property is set to transition, but the transition animation is not triggered.
The reason is that CSS Transtion does not support element height or width changes to auto.
For this scenario, we can use max-height to hack.
Here’s a very interesting trick. Height: Auto is not supported, so we can use max-height to dynamically scale the height. For example:
{
max-height: 0;
transition: max-height 0.3 s linear;
&.up {
max-height: 0;
}
&.down {
max-height: 1000px; }}Copy the code
You can see the details – CSS Wizardry: Dynamic height transition animation.
Transition can fine-tune every property
To continue. In transition, we can use transition: all 1s Linear to apply transition effects to all attributes that support transitions.
At the same time, we can also fine control each attribute separately:
{// can do thistransition: all 1slinear; // You can do thattransition: height 1s linear, transform 0.5 s ease-in, color 2s ease-in-out;
}
Copy the codeAnd, like animation, each transition supports delayed triggering:
div{/ / delay1sTrigger transition, and the time of transition animation is0.8 秒
transition:.8s transform 1s linear;
}
div:hover {
transform: translate(120px.0);
}
Copy the code
It can be seen that both transition trigger and transition reset will wait 1 second before triggering.
Using this technique, we can achieve some combination of transition effects. First we implement a transition animation with a width and height change:
<div></div>
Copy the codediv {
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;
}
Copy the codeWe each control element of pseudo element height, width, and the change of the bottom border, and give the width of the transition animation and the color of the bottom border animation set up 0.25 seconds delay, the height of such elements will be to transition, due to the transition of the overall animation world time is 0.25 s, so high after the transition animation, begin width transition animations, The bottom border also changes color.
This will link their transition animations together on the border of the element and look at the effect:
Using the same principle, we also use another pseudo-element of the element, but their animation time needs to be added to 0.5 seconds as a whole, and can not be executed until the above transition animation is completed:
div::after {
right: 0;
bottom: 0;
}
div:hover::after{
transition: height .25s, width .25s, border-top-color .25s;
transition-delay: 0.5 s.0.75 s.0.75 s;
width: 200px;
height: 64px;
border-top: 3px solid #00e2ff;
border-right: 3px solid #00e2ff;
}
Copy the code
Thus, we can combine the transition animations of the two pseudo-elements to get a complete border animation as follows:
CodePen — Border button animation with transition-delay
So, with the right control of each attribute, you can combine all kinds of interesting effects.
The dynamic changetransition-duration
Another interesting trick is to dynamically change the transition-duration of an element using some of its pseudo-classes.
Here’s an example:
div {
width: 140px;
height: 64px;
border: 2px solid red;
transition: 3s all linear;
}
div:hover {
transition-duration:.5s;
border: 2px solid blue;
}
Copy the codeWhen hover element is hover, change the transition-duration of the element from 3s to 0.5s, so that when hover element is hover, transition duration is 0.5s, but transition reset duration is 3s:
Using this little trick, we tried to make some interesting effects.
Pure CSS implementation signature board
Using the above tips, we can implement a pure CSS signature board.
First, create a 100×100 HTML grid layout in a 500px container using Either Flex or grid. For convenience, I used 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
Copy the codeFor illustration purposes, I added a border to each grid. In fact, both the background and grid are white:
To achieve the signature effect, we add hover events to each grid G-item, which hover changes the background color of the current grid. And most importantly, ** sets a very large transition-duration in the normal state and a very small transition-duration in the hover state.
.g-item {
transition: 999999s;
}
.g-item:hover {
background: # 000;
transition: 0s;
}
Copy the codeLook at the results:
Transition: 0s to hover, and transition: 0s to hover, and transition: 0s to hover 999999s will come back into effect, and black will fade at a very, very slow rate, too slow to feel it changing.
To implement the signature, we need to implement the mouse hover on the artboard does not immediately start the element’s background color change, only when the mouse is down (remain :active), start to follow the mouse track color change. When the mouse stops clicking, it stops drawing.
So there’s a clever way to do this, we’re going to put a div on top of the canvas, and the z-index is higher than the canvas, and when the mouse hover over the canvas, actually hover over this mask layer, when the mouse is down and the :active event is triggered, Remove the mask layer by adding an: Activce event to the element.
The pseudocode 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
Copy the code.g-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
&:active {
display: none; }}Copy the codeThus, a complete signature board, or drawing board, is achieved:
Complete code implementation, and use CSS to add a reset function, you can stamp here: CodePen Demo — Pure CSS signature
Using this trick, you can actually use CSS to follow the mouse (albeit a weak one), which can then be mixed with many other properties, such as blending modes and filters.
Like this, an effect from my friend Alphardex takes advantage of the above technique, superimposed with blending mode and filter implementation:
CodePen Demo — Snow Scratch
The last
The end of this article, I hope to help you :), want to Get the most interesting CSS information, do not miss my official number – iCSS front-end interesting news 😄
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.