CSS quickly realizes fireworks blooming🎆

Recent projects need to do a fireworks animation, the requirement is random sizes, different occurrences , look at the effect

1. Choose the right animation

What kind of scene determines what kind of animation to use. For example, for some relatively lightweight and decorative animations, CSS animation is sufficient, and for some operational activities that require relatively high animation requirements, creative games, etc., JS animation is definitely the first choice. If necessary, some graphics libraries are required, such as Pixi.js .

Secondly, we also need to consider the cost of learning. Generally speaking, CSS is easier to use, and the cost is lower to get started. If you need a slightly more complicated animation, you can directly refer to the existing library, such as Animate.css . JS may be a bit more complicated. Native JS is okay. If it is another graphics library, it needs to face completely different apis, which is the cost of learning.

Finally, engineering needs to be considered. For example, lottie-web itself is already very large (532k, 150k after compression, 43k after gzip), and the exported animation json file will also be large. It is not worthwhile to introduce the entire lottie just for one animation. Now, we should change to another method.

Comprehensive consideration, firework animation can be implemented using CSS

Second, the realization of a single firework

Here we can take the way of sequence frames to achieve. For example, I would ask the designer to export a set of sequence frame pictures, like this

Then combine these pictures into one picture in order, you can use some online generation tools, such as sprite-generator , and you get this picture

Next, just use the steps() function symbol in the CSS animation function to complete the frame-by-frame animation

Assuming the following HTML structure

<div class="fireworks"></div>

CSS is implemented as

.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%;
    }
}

The effect is as follows

3. Fireworks at random locations

Nowadays, the position of the fireworks is always the same every time. It is too regular and not so natural. So how to achieve the effect of being here and there for a while? Here you can add another key frame and change a few positions at will (not necessarily really random, just look less regular)

@keyframes random {
    25% {
        transform: translate(200%, 50%);
    }
    50% {
        transform: translate(80%, 80%);
    }
    75% {
        transform: translate(20%, 60%);
    }
}

Then combine the two animations

.fireworks {
    /* 其他 */
    animation: fireworks 1s steps(24) infinite, random 4s infinite;
}

The effect is as follows

Is it a weird animation? The reason is that the transition is smooth when changing the position, so this place also needs to add steps() . Note that only steps(1) is needed here, which means that the process will end when you jump directly to the specified key frame, and it will not be automatically created on the way. Other frames

.fireworks {
    /* 其他 */
    animation: fireworks 1s steps(24) infinite, random 4s steps(1) infinite;
}

The effect is as follows

Is this more natural?

4. Randomly sized fireworks

The random position is there, now add some size changes, just add scale to the position change.

@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);
    }
}

The effect is as follows

Such a random location and random size firework is complete

Five, multiple fireworks bloom randomly

A single firework is still a bit monotonous. Now add a few more. Since a single firework will appear in 4 different positions now, there is not much HTML structure needed, each giving 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>

The effect is as follows

4 appear together, too neat, so we need to add some delay animation-delay staggered appearance time

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

This will get the effect at the beginning of the article

The complete code can be accessed at CSS fireworks (codepen.io)

Six, colorful fireworks

Design students think that white is a bit too monotonous, and want to change the color, such as yellow? Since we have already made a sequence of frame pictures, it is impossible to generate a set of pictures of yellow fireworks, so the question is, how to change the color through CSS?

Here again, I have to use CSS Mask . The previous article on Mask introduced many practical cases. I won’t introduce them here. If you are not familiar with mask , you can refer to this inn storybook: CSS mask CSS3 mask / masks detail << Zhangxin Xu - space Xin - Xin life (zhangxinxu.com)

It only needs a little change, use the original background as the mask background, as follows

.fireworks {
    /*其他样式*/
      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%;
    }
}

The effect is as follows

Further, you can add color change animation, such as yellow → red → purple → cyan, and then define a key frame

}
.fireworks {
       /*其他样式*/
    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;
    }
}

You can get the following effects

Has it become more colorful? The complete code can be accessed at CSS fireworks colors (codepen.io)

7. Downgrade processing under IE

Modern browsers basically support mask mask, but IE does not support it, so it becomes like this under IE

Therefore, it needs to be downgraded under IE, instead of being colorful, it only needs to bloom randomly

So how to distinguish between IE browser and modern browser? In fact, you can use some selectors that IE does not support, such as :default

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

/*以下现代浏览器支持*/
_:default, .fireworks {
    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    -webkit-mask-size: auto 150px;
}

8. Animation and user experience

Appropriate animation can improve the user experience, but not all users like animation, especially some decorative animations, which may feel fancy, may feel distracting, may be to save power, and even some animations will cause undesirable effects for users. reaction. For this reason, the right of choice should be left to the user, who feels that it is not necessary to close the animation directly in the system.

Most current operating systems can turn off unnecessary animations

• In Windows 10: Settings> Easy Access> Display> Show Animation in Windows.
• In Windows 7: Control Panel> Easy Access> Make computer easier to view> Turn off unnecessary animations.
• In MacOS: System Preferences> Accessibility> Display> Reduce dynamic effects.
• On iOS: Settings> General> Accessibility> Reduce dynamic effects.
• On Android 9+: Settings> Accessibility> Remove Animation.

Correspondingly, in the CSS, the media query prefers-reduced-motion can be used to detect whether the system has enabled the animation reduction function.

So, you can add this piece of CSS

@media screen and (prefers-reduced-motion) { 
    /* 禁用不必要的动画 */ 
    .fireworks { 
        animation: none; 
    } 
}

The effect is as follows (here, macOS is taken as an example)

It can be seen that when "Reduced Dynamic Effect" is checked, the firework dynamic effect disappears completely. Although there is no technical content, it has taken care of the feelings of some people and improved the user experience unknowingly. Why not do it.

Nine, summary and explanation

The above introduces the whole process of the realization of fireworks animation, and also includes some user experience tips, a brief summary

1. Choose the right way to achieve animation
2. The key to the realization of CSS sequence frame animation is steps
3. Multiple animations can be combined to form a new animation
4. Change the color of the graphics can be achieved with mask
5. IE and modern browsers can use: default to distinguish
6. It is necessary to follow the system settings to close the animation, you can use the media query prefers-reduced-motion

CSS implementation is not complicated, most students should be able to get started quickly, but it is not easy to do it perfectly. If you think it's not bad, if it is helpful to you, please like, bookmark, and forward ❤❤❤