staggered animation

Sometimes we need to add the same animation to multiple elements, and after playing it, it’s not hard to realize that they will move together and end together, which makes it look bland.

So how do you make the animation slightly more interesting? It’s simple, since they all start moving at the same moment, wouldn’t it work to make them not move at the same moment. How do you make them not move at the same moment? Notice that CSS animations have a delay ( delay ) property. For example, for example, there are ten elements to play ten animations, the second element of the animation time set to the first element 0.5 seconds later (that is, the delay is set to 0.5 seconds), and other elements, and so on, so that they will be staggered to form a unique visual effect.

This is called interlaced animation: the effect of interlacing the animation is achieved by setting different delay times.

 Splitting text with JS

There’s another way to play with it that’s often used: using JS to split sentences or words into letters and adding different delay animations to each letter, which is also gorgeous!

 Interlaced animation of different positions

Generally we start interleaving from the first element. But if we want to start interleaving from the middle element, we have to add a value to each of the current element’s delays, which is the product of the distance from the subscript of the middle element to the subscript of the current element (i.e., the absolute value of the difference between the subscripts) and the step size

 This demo is located at: Reveal Text

 Random particle animation

Speaking of randomness, we can achieve an even crazier effect: add staggered animation to hundreds of particles with randomized staggering times and randomized positions and sizes. In this way we can simulate the effect of snow with pure CSS.

 This demo is located at: Snow (Pure CSS)

 Pseudo-classes and pseudo-elements

The state of an HTML element can change dynamically. For example, when you hover your mouse over a button, the button will become “hover” state, then we can use the pseudo-class :hover to select this state of the button, and its style to change.

:hover It is one of the pseudo-classes that I use most often. Another very common pseudo-class is :nth-child , which is used to select a sub-element of an element. Other pseudo-classes such as :focus and :focus-within are also used.

 Absolute positioning for multiple borders

Who says buttons can only have one set of borders? Using absolute positioning and padding , we can make 3 sets of different sized borders for the buttons, so the effect will be more dazzling!

This demo address: Button Hover Multiple Border Stroke

In short, a pseudo-element is an additional element that is inserted on top of the original element and that does not act as an HTML tag, thus keeping the HTML structure clean.

We know that each element has two pseudo-elements, ::before and ::after , which means that each element provides 3 rectangles (1 for the element itself and 2 for the pseudo-elements) to draw shapes. Now with the clip-path attribute, almost any shape can be drawn, depending on your imagination!

The above motion picture is the animation of the bar crossing the text, the bar is the pseudo-element corresponding to each text, apply animation to each text and its pseudo-element, you can achieve the effect of the above picture

This demo address: Header With Slide Bar

 attr() generate text content

elements can have customized attribute values, which are usually named in the format of data-*

attr() Used to get the value of this custom attribute of an element and assign it to its pseudo-element content as its generated content

With this function, we can use pseudo-elements to “copy” another text on top of the original text, as shown in the following figure

Looks a bit messy right? It’s ok, add overflow: hidden to it to cover up the extra text. Splitting the text and applying an interlacing animation via JS gives you the following effect, which is what this article is going to talk about next overflow hoodwinking

 overflow trick

I’ve done the flashing button effect before: a light crosses from left to right when the mouse hovers over the button.

The author then used a gradient to simulate that light, panning it to the right via transform: translateX()

But that’s obviously not right. Why would the light be visible? Shouldn’t it be “blocked”?

So, by adding overflow: hidden to the button, the light is hidden when it is outside the button.

 Customize input

What if the default input is too ugly? Then just erase it and set opacity: 0 .

Closely related to input is the label element, because when the user clicks on the label element it also triggers a change in the state of input . Using this feature, it is possible to customize the style of label , but not only that, it is also possible to add more elements next to label , define the style by selecting them with the sibling selector ~ , use the :checked pseudo-class to listen to the state change of the original input , and add a bit of animation, and you have completed the customization of input !

As of now, the input element also supports pseudo-elements, which brings up another idea: use appearance: none to eliminate the default style of input , and then customize it with a pseudo-element so that label retains its original style.

 This demo address: Todo List

 CSS features

 Using certain CSS features can also add color to your work.

animation

This includes transition and transform

 Here’s my personal business card, and guess what techniques are used in it?

First, the animation of the four borders appearing at the beginning uses overflow hustle

 Second, the bar crossing over the text uses a pseudo-element animation

 Finally, the sequential appearance of social icons uses interlaced animation

 This demo address: Profile Card

border-radius

 Adds rounded corners to boxes, often used to beautify components such as buttons

If it is set to 50% it is a circle, which is also commonly used.

 Irregular curved edge shape

Adjust border-radius for multiple vertices to make irregular curved edges.

 Address of this demo: Nav Tab

box-shadow

Adding a shadow to the box adds dimension to the box, can be layered and will make the shadow more silky smooth

 This demo is located at: Pagination

Notice that box-shadow also has a inset for the inner glow of the box

Using this feature we can set the color within a certain range inside the box to make a crescent shape

 With a little animation and filters, the Scarlet Moon shines!

Notice the faint reddish glow, which is actually the effect of the blur filter applied to the 2 pseudo-elements.

This demo is located at: Crimson Crescent Loading

text-shadow

Text shadows, essentially the same as box-shadow , but relative to the text, often used in the text glow, but also through the multi-layer overlay to create neon text and pseudo-3D text and other effects.

 Illuminated text

 neon text

 This demo is located at: Neon Text

 Pseudo-3D text

background-clip:text

The ability to crop the background to the foreground color of the text, often used in conjunction with color: transparent to generate gradient text.

This demo address: Menu Hover Fill Text

gradient

Gradients can be used as a background image with a strong color effect and can even be used to simulate light

linear-gradient

 Linear gradients are the most common gradients used by the author

This one uses the HTML dialog tag, linear gradient background, animation and overflow hoodwinking, for those of you who are paying attention 🙂

 This demo is located at: Confirm Modal

radial-gradient

Radial gradients are often used to generate circular backgrounds. In the example above, Snow’s background is an elliptical radial gradient.

In addition, since the background can be superimposed, we can superimpose multiple radial gradients of different positional sizes to generate clusters of polka dots, which together with the animation creates a particulate effect without the need for the extra div element

 This demo address: Particle Button

conic-gradient

 Conic gradients can be used to create pie charts

By overlaying a pseudo-element on top of the pie chart and setting content to a certain value (which is calculated via a CSS variable), you can create the effect of a metric meter, and the blindfold has once again accomplished its mission

 Address of this demo: Gauge (No SVG)

filter

 Filters in PS, blur most commonly used

 Integration effects

When the blur filter and the contrast filter are used together, a peculiar effect of blending ( gooey ) is produced

 This demo is located at: Snow Scratch

backdrop-filter

 Apply a filter to the background to produce a hairy glass effect

 This demo is located at: Frosted Glass

mix-blend-mode

 Blending modes in PS, often used for special effects of text against a background

The following text-video masking effect is achieved using the color dropout mode ( screen )

 This demo address: Video Mask Text

clip-path

Cropping in PS allows you to create all sorts of irregular shapes. It would also be quite interesting to combine it with animation

 failure effect

Since clip-path has a crop function, you can create cool glitch effects ( glitch ) by stacking multiple texts on top of each other and cutting them proportionally into multiple points, and then applying interlacing animation.

This demo address: Cross Bar Glitch Text

mask

Masking in PS. The so-called mask, is the original picture only show the non-transparent part of the mask image

 Skeleton effect

Although clip-path can cut out shapes, it can’t skeletonize them because the inside of the shape is out of its hands.

Some people (including me) may use pseudo-elements to “simulate” skeletonization (by setting the same background color), but this is not a real skeleton, a different background or floating in the picture will be exposed, then we have to resort to masking!

Suppose, you want to make a hollow circle, then you just need to use a radial gradient as a mask for the element, and the first color-stop is set to transparent, and the other color-stop is set to other colors, because the definition of a mask is to show only the non-transparent part of the masked image

Note: In order to eliminate jaggies, this radial gradient needs to have an extra color-stop in the middle for buffering, with the length set to the original length plus 0.5px.

-webkit-box-reflect

 Projection effect, not very common, suitable for three-dimensional works

web animations

Although this is not a CSS feature, it is often used to accomplish things that CSS cannot do

So when do you use it? It’s naturally used when there are properties in a CSS animation that can’t be retrieved from CSS

 Tracking the mouse position

CSS does not yet have an API for getting the mouse position, so consider using JS for the

By checking the relevant DOM APIs, I found that in the API for listening to mouse events, you can use e.clientX and e.clientY to get the current position of the mouse.

Since it is possible to get the mouse position, it is not difficult to track the mouse position: listen to the mouseenter and mouseleave events to get the position of the mouse when it enters or exits an element, and use this coordinate as the displacement distance of the mouse, and listen to the mousemove event to get the position of the mouse when it moves over an element, and similarly, use this coordinate as the displacement distance of the mouse, and then a mouse-tracking effect has been realized.

CSS Houdini

CSS Houdini is the underlying API for CSS, which allows us to extend the functionality of CSS through this set of interfaces

 Let the gradual change take place

As of now, we can’t animate the gradient directly because the browser doesn’t understand what type of value is to be changed

At this point, we can register our custom variable with CSS.registerProperty() and declare its syntax type ( syntax ) to be the color type <color> so that the browser understands and applies interpolation to the color to animate it.

Remember the cone gradient conic-gradient() mentioned above? Since it can be used to make pie charts, can we make them move? The answer is yes. Define three variables: --color1 , --color2 and --pos , where --pos is syntactically a percentage of length <length-percentage> , and change it from 0 to 100% , and the pie chart will rotate clockwise!

Using absolute positioning and cascading context, we can stack multiple pie charts from small to large, and then set different colors for them, applying interlacing animation, and we have the following dazzling effect

 This demo is located at: Mawaru