In the recent project, we need to make a firework animation, which requires a random size and appears in different places. Let’s see the effect first

First, choose the right animation

What kind of scene determines what kind of animation to use. For example, some relatively light, decorative animation, CSS animation is enough, and some animation requirements are relatively high operation activities, creative small games, JS animation is certainly the first choice, if necessary, also need to use some graphics library, such as pixi.js.

Secondly, we need to consider the cost of learning. In general, CSS is easier to use, cheaper to get started, and you can refer directly to existing libraries such as Animate. JS may be more complex, native JS is ok, if it is other graphics libraries, and need to face a completely different API, are learning costs.

Finally, engineering also needs to be considered. For example, Lottie-Web itself is already quite large (532K, 150K compressed, 43K gzip), and designing exported animation JSON files is quite large. Importing the entire Lottie just for one animation is not worth it and should be done in another way.

Comprehensive consideration, fireworks animation can be implemented using CSS

Two, the realization of a single fireworks

Here we can do it in the form of sequence frames. For example, I would ask the designer to export a sequence of frames, something like this

These images are then combined together on a single image, in order, using an online generation tool such as Sprite-Generator

Next, just use the steps() function in the CSS animation function to animate frame by frame

Suppose you have the following HTML structure

<div class="fireworks"></div>
Copy the code

CSS is implemented as a

.fireworks {
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    background-size: auto 150px;
    animation: fireworks 1s steps(24) infinite;
}
@keyframes fireworks {
    to {
        background-position: 100%; }}Copy the code

Results the following

Three, the random location of fireworks

Now the fireworks appear in the same position every time, too regular seems not so natural, so how to achieve the effect of one here and one there? You can add another keyframe here, and change a few positions (it doesn’t have to be random, it just has to look random)

@keyframes random {
    25% {
        transform: translate(200%.50%);
    }
    50% {
        transform: translate(80%.80%);
    }
    75% {
        transform: translate(20%.60%); }}Copy the code

Then combine the two animations

.fireworks {
    / * * /
    animation: fireworks 1s steps(24) infinite, random 4s infinite;
}
Copy the code

Results the following

Isn’t it a strange animation? Steps () is also needed in this area because the transition is smooth when changing position. Note that only steps(1) is needed in this area, which means that the process will end by jumping directly to the specified key frame, and no other frames will be created automatically on the way

.fireworks {
    / * * /
    animation: fireworks 1s steps(24) infinite, random 4s steps(1) infinite;
}
Copy the code

Results the following

Isn’t that more natural?

Four, random size fireworks

So I have random position, and now I’m going to add the change in size, just add scale to the change in position

@keyframes random {
    25% {
        transform: translate(200%.50%) scale(0.8);
    }
    50% {
        transform: translate(80%.80%) scale(1.2);
    }
    75% {
        transform: translate(20%.60%) scale(0.65); }}Copy the code

Results the following

So a random location, random size firework is complete

Five, a number of fireworks randomly bloom

A single firework is still a bit monotonous, now add a few more, because now a single firework will appear in 4 different positions, so do not need much HTML structure, each give a different position

<div class="fireworks" style="left: 15%; top: 5%;"></div>
<div class="fireworks" style="right: 30%; top: 13%;"></div>
<div class="fireworks" style="left: 5%; top: 23%;"></div>
<div class="fireworks" style="right: 45%; top: 8%;"></div>
Copy the code

Results the following

It is too neat to have four at the same time, so we need to add some delay animation-delay to stagger the occurrence time

<div class="fireworks" style="left: 15%; top: 5%;" ></div>
<div class="fireworks" style="right: 30%; top: 13%; animation-delay: -0.4 s;" ></div>
<div class="fireworks" style="left: 5%; top: 23%; animation-delay: -1.7 s;" ></div>
<div class="fireworks" style="right: 45%; top: 8%; animation-delay: -3.1 s;" ></div>
Copy the code

That’s how it looks at the beginning of the article

CSS Fireworks (codepen.io)

Six, colorful fireworks

Design students think white is a little monotonous, want to change the color, such as yellow? Since we have made a sequence of frames, it is impossible to reproduce a set of yellow fireworks, so the question is, how to change the color through CSS?

Here we have to use the CSS Mask, Mask before the article introduced a lot of practical cases, here is not more, if you are not familiar with Mask, you can refer to this inn story: CSS mask CSS3 mask/masks

Just a little change is needed, using the original background as the mask background, as follows

.fireworks {
    /* Other styles */
  	background: #FFEFAD;
    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    -webkit-mask-size: auto 150px;
}
@keyframes fireworks {
    to {
        -webkit-mask-position: 100%; }}Copy the code

Results the following

To go one step further, you can add a color change animation, such as yellow, red, purple, blue, and define a keyframe

}
.fireworks {
   	/* Other styles */
    animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random_color 1s infinite;
}
@keyframes random_color {
    0% {
        background-color: #ffefad;
    }
    25% {
        background-color: #ffadad;
    }
    50% {
        background-color: #aeadff;
    }
    75% {
        background-color: #adffd9; }}Copy the code

You get the following effect

Does it become colorful? CSS Fireworks Colors (codepen.io)

Seven, IE downgrade processing

Most modern browsers support masks, but Internet Explorer does not

Therefore, IE under the need to degrade processing, not gorgeous, just need to randomly bloom

So how do you distinguish Internet Explorer from modern browsers? In fact, you can use IE does not support some selectors, such as :default

.fireworks {
    background: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    background-size: auto 150px;
}

The following modern browsers support */
_:default..fireworks {
    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    -webkit-mask-size: auto 150px;
}
Copy the code

Animation and user experience

Appropriate animations can improve user experience, but not all users like animations, especially some decorative animations, which may be considered flashy, distracting, and even cause bad reactions to users in order to save electricity. To do this, the option should be given to the user, who can turn off the animation in the system if they don’t need it.

Most current operating systems can turn off unnecessary animations

  • In Windows 10: Settings > Easy Get > Show > Show animation in Windows.
  • In Windows 7: Control Panel > Easy Access > Make computers easier to view > Turn off unnecessary animations.
  • On MacOS: System Preferences > Assisted Use > Display > Attenuate Dynamic Effects.
  • On iOS: Settings > General > AIDS > Attenuate Dynamic Effects.
  • On Android 9+ : Settings > AIDS > Remove Animation.

In the CSS, you can query the GRANate-motion function to check whether the animation reduction function is enabled.

So, you can add another CSS like this

@media screen and (prefers-reduced-motion) { 
    /* Disable unnecessary animations */ 
    .fireworks { 
        animation: none; }}Copy the code

The effect is as follows (macOS as an example)

It can be seen that when the “reduce dynamic effect” is checked, the fireworks dynamic effect completely disappears. Although there is no technical content, but it takes care of some people’s feelings, unconsciously improve the user experience, why not?

Ix. Summary and explanation

The above introduces the whole process of fireworks animation implementation, including some user experience tips, a brief summary

  1. Choose the appropriate animation implementation
  2. The key to CSS sequence frame animation is steps
  3. Multiple animations can be combined to form new animations
  4. Changing graphic colors can be done with masks
  5. Internet Explorer and modern browsers can be distinguished by :default
  6. It is necessary to follow the system Settings to turn off the animation, and you can query the ANa-reduced-motion with media

CSS implementation is not complicated, most students should be able to use it quickly, but it is not easy to do perfect. If you think it’s good and helpful, please like, bookmark and retweet ❤❤❤