A pure CSS solution for the festive season as used for Tesco Christmas 2015, the Tesco homepage, and store-locator too. This piece is a furtherance to Estelle Weyl's snow demo.
One issue outstanding in IE10, where only some flakes spin and drift, which is odd to say the least.
This is what a single row looks like:
To increase the number of flakes simply duplicate ALL <i> tags and increase .flakes offset height, and falling distance.
Disable flex while changing the quantities of snowflakes. Otherwise flex will resize the <i> tags to fit the available width.
For the sake of brevity I've excluded browser specific prefixes here. Though the stand-alone demo contains everything you need.
The snowflakes container
flex is used to space the <i> tags evenly across the horizontal plane. Playing nicely at in-between device widths. Be sure to temporarily disable flex if you are adjusting the number of flakes. 20vh is allocated per row of flakes. The falling animation would require adjustment too.
Hardware acceleration is encouraged via 3D transforms.
Cover the flakes container with the background color. That's in case low screen height allows the start position of the flakes to show through.
Generic styling of the snowflakes, setting defaults for the animation and transforms. Again encouraging hardware acceleration where supported.
There are four flake sizes, each requires an individual origin set.
Keep the first snowflake close to the left edge:
Delay the start times of the snowflake animations:
Animation durations are calculated to be multiples of each other +/- a few seconds for initial delays.
Tweak the timing functions to improve the randomness.
Tweak opacity for even more randomness.
Increase the number of snowflakes at common device widths. Remember that flex evenly distributes them across the horizontal.
One simple animation function for all the snowflakes:
Adding snowflakes dynamically