{"id":74940,"date":"2025-04-29T01:37:56","date_gmt":"2025-04-29T01:37:56","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2025\/04\/29\/falling-snowflakes-in-html-emails-with-css-animations\/"},"modified":"2025-04-29T01:39:58","modified_gmt":"2025-04-29T01:39:58","slug":"falling-snowflakes-in-html-emails-with-css-animations","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2025\/04\/29\/falling-snowflakes-in-html-emails-with-css-animations\/","title":{"rendered":"Falling Snowflakes in HTML Emails with CSS Animations"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n


\n December 5, 2024<\/p>\n

It\u2019s time for what has develop into a cherished vacation custom right here at Sinch E mail on Acid \u2013 the annual sharing of a tutorial on how one can use CSS animations to create a falling snow impact in your HTML emails. Are you able to consider a greater electronic mail geek present for the season?<\/p>\n

We owe this custom to our pricey good friend and contributor Jay Oram<\/a> of ActionRocket who first confirmed us how one can add wintry vibes in electronic mail campaigns six years in the past. Be sure you try extra of Jay and the ActionRocket team\u2019s work<\/a> \u2013 you\u2019ll be impressed to go additional with electronic mail.<\/p>\n

\u2018Tis the season for astonishing and delighting your subscribers, and this can be a enjoyable method to do it.<\/p>\n

Can ChatGPT code falling snow for HTML emails?<\/h2>\n<\/p>\n

Only for kicks, we determined to ask ChatGPT if it knew how one can code falling snowflakes in an HTML electronic mail. Right here\u2019s the reply we acquired:<\/p>\n

\n
\n

Creating falling snowflakes in an HTML electronic mail is difficult as a result of electronic mail purchasers have strict limitations on what CSS and JavaScript they assist. Nevertheless, you’ll be able to simulate falling snowflakes utilizing animated GIFs or embedded SVG animations, as these are extra broadly supported throughout electronic mail purchasers.<\/p>\n<\/div><\/div>\n

You\u2019re not precisely improper, ChatGPT, however you\u2019re not attempting laborious sufficient. Certain, we might have used a distinct immediate and saved attempting, but it surely\u2019s the busy vacation season. Ain\u2019t no one bought time for that.<\/p>\n

The AI reply went on to supply a pair code snippets utilizing a GIF as a background or an inline SVG. However we\u2019re speaking about one thing completely different right here. <\/p>\n

This tutorial reveals you how one can get falling snowflakes within the foreground of your electronic mail utilizing CSS animations. The result’s an electronic mail marketing campaign with some depth of subject, virtually giving it a 3D impact. That could be overstating issues just a bit<\/em> \u2013 but it surely\u2019s fairly cool.<\/p>\n

How an animated snowflake impact seems to be in electronic mail<\/h2>\n<\/p>\n

Check out the e-mail publication Jay coded up for us again within the day. We\u2019re prepared to guess many of the emails you opened over Black Friday and Cyber Monday<\/a> didn’t<\/em> embrace little snowflakes gently falling down your display screen. In the event that they did\u2026 we\u2019re additionally prepared to guess they discovered how right here.<\/p>\n

\n
\"Email\"Email<\/figure>\n<\/div>\n

This isn\u2019t the form of factor you count on to see in a typical publication or electronic mail promotion. However right here\u2019s the factor\u2026 When you\u2019ve shattered your subscribers\u2019 expectations, you\u2019ve set the stage for much more inbox surprises.<\/p>\n

That would very properly imply greater open charges and increased email engagement<\/a>. Now you\u2019re subscribers shall be questioning what they may discover the subsequent time they try your electronic mail advertising campaigns.<\/p>\n

You understand how a present at all times seems to be higher with a bow on high? Consider this as that final touch that makes opening an electronic mail include a bit vacation magic.<\/p>\n

E mail consumer assist for CSS animations<\/h2>\n<\/p>\n

Sadly, nothing in electronic mail improvement is ideal. This system makes use of CSS animation and keyframes. Based on CanIEmail.com<\/a>, these are solely supported in purchasers utilizing WebKit because the rendering engine, which is especially Apple Mail and Outlook for Mac in addition to Samsung and Thunderbird.<\/p>\n

However for those who try your electronic mail analytics, that might be significant slice of your electronic mail subscribers. You\u2019ll learn the way to focus on purchasers that assist CSS animations<\/p>\n

Standing out within the inbox is a endless problem. Placing in a bit further effort on this means makes your emails memorable. However sufficient with the fluff. Let\u2019s flip issues over to Jay Oram and learn the way to let it snow. Right here\u2019s his animated snowflake tutorial for electronic mail builders trying to unfold vacation cheer.<\/p>\n

Establishing the snowflake CSS animation<\/h2>\n<\/p>\n

The snow impact is basically a snowflake or form in a div that you simply animate utilizing CSS. This system strikes the picture from the highest to the underside of a container div you place round your electronic mail tables.<\/p>\n

CSS animations work on a spread of electronic mail purchasers together with iOS, Apple Mail, Android Native Mail and Outlook for Mac. The snow animation received\u2019t show on different electronic mail purchasers, so that you don\u2019t want to supply a fallback.<\/p>\n

First, we arrange the media query<\/a> to detect the webkit, that can assist the CSS animation.<\/p>\n

\n
\n
\n

\n                            
\n
\n                                @media display screen and (-webkit-min-device-pixel-ratio: 0) {
\n}
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Subsequent, we arrange the container the snow shall be in.<\/p>\n
\n
\n
\n

\n                            
\n
\n                                .snowcontainer{
\n  place:relative;
\n  width:100%;
\n  overflow:seen;
\n}
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Creating your snowflakes<\/h3>\n<\/p>\n
We then have to outline the snow. The only means to do that is to make use of a form that doesn\u2019t want a picture, akin to a sq.. You’ll be able to create a sq. by setting top: 18px<\/code> by width: 18px<\/code> and setting a border-radius that’s half the peak (to realize an ideal circle), border-radius: 9px<\/code>. Set the place:absolute<\/code> \u00a0so the snow shall be positioned inside the container and high: -20px<\/code> to begin the animation earlier than it enters the snowcontainer. Lastly, add a background-color to set the colour of the form.<\/p>\n
It seems to be like this:<\/p>\n
\"shape\"shape<\/figure>\n
Right here\u2019s the code for the form snowflake:<\/p>\n
\n
\n
\n

\n                            
\n
\n                                .snow{
\n            top: 18px;
\n            border-radius: 9px;
\n            width: 18px;
\n            place: absolute;
\n            high: -20px;
\n            background-color: #ffffff;
\n      }
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
One other means so as to add a snowflake is so as to add a background picture. This system is just like to the sq. method above, but it surely makes use of a background-image and no border-radius. With these modifications, the snowflake will seem like this:<\/p>\n
\"snowflake\"snowflake<\/figure>\n
Right here\u2019s the code for the picture snowflake:<\/p>\n
\n
\n
\n

\n                            
\n
\n                                .snowimage{
\n  \/* dimension of picture *\/
\n  top:18px;
\n  width:18px;
\n  \/* absolute - relative to the container div *\/
\n  place:absolute;
\n  \/* The place animation begins *\/
\n  high:-20px;
\n  \/* picture hyperlink *\/
\n  background-image:url('photographs\/snowflake.png');
\n}
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Setting the background-image as a .png means the snowflake can have a clear background and present the content material by means of it. If you happen to want some snowflake inspiration, try the Noun Project\u2019s snowflake icons<\/a>.<\/p>\n
Animating your snowflakes<\/h3>\n<\/p>\n
With the code as is, we simply have some shapes inside a <\/p>\n
. To animate them, we are able to put collectively a shortened model of an animation. See beneath:<\/p>\n
\n
\n
\n

\n                            
\n
\n                                .snow1{
\n  animation: snow1 5s linear 0s infinite;
\n }
\n \/* animation: Title of animation \/ size of animation \/ timing perform
\n(linear = identical pace from starting to finish) \/ delay (time between
\nanimation finish and begin) \/ variety of occasions *\/
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
This animation is known as snow1. We outline the size of the animation as 5s (5 seconds) and the linear timing perform. The linear timing quantity retains the animation the identical pace all through \u2013 0s (zero seconds) is the delay earlier than the animation begins once more. Lastly, we embrace the variety of occasions the animation will run (infinite).<\/p>\n
By creating a couple of completely different animations with barely completely different lengths and delay time, the snow will fall at random.<\/p>\n
\n
\n
\n

\n                            
\n
\n                                .snow2{
\n  animation: snow2 6s linear 1s infinite;
\n }
\n .snow3{
\n  animation: snow3 7s linear 2s infinite;
\n }
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Subsequent, we arrange the keyframe animations to dictate the place the snowflake will transfer to and from.<\/p>\n
\n
\n
\n

\n                            
\n
\n                                @keyframes snow1
\n {
\n  0% { high:0%;left:50%; }
\n  100% { high:100%;left:65%; }
\n }
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Initially of the animation (0%), we place the snowflake on the high of the div (0%) and 50% from the left. On the finish of the animation (100%) the snowflake is 100% from the highest and 65% from the left.<\/p>\n
By setting the beginning and finish factors barely completely different in every animation, the snow will appear to seem extra at random.<\/p>\n
\n
\n
\n

\n                            
\n
\n                                @keyframes snow2
\n {
\n  0% { high:0%;left:30%; }
\n  100% { high:100%;left:25%; }
\n }
\n @keyframes snow3
\n {
\n  0% { high:0%;left:70%; }
\n  100% { high:100%;left:60%; }
\n }
\n                            <\/code>
\n                        <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\"snowflake\"snowflake<\/figure>\n<\/div>\n
HTML for the snowflake animation<\/h2>\n<\/p>\n
When you\u2019ve created the CSS animation, you\u2019ll want so as to add this impact to your electronic mail utilizing HTML. To create this animation method, the primary little bit of HTML you want is a <\/p>\n
 to open the snow container. You'll be able to set the peak and width of the container to determine the place the snow will present. For instance:<\/p>\n
\n
Subsequent, every particular person snowdrop must be set. To do that, begin with a <\/p>\n
 with the category of the snowimage or snow as arrange in your CSS. Comply with that with the identify of the animation (e.g. snow1). The code ought to appear like this:<\/p>\n
Then, add in all of the snowdrops and animations inside the snow container. See beneath:<\/p>\n
\n
Place all of your electronic mail content material you desire to beneath your snowdrops and end with a closing <\/p>\n<\/div>\n
 to finish the snowcontainer.<\/code><\/p>\n
Get all of the code and see it in motion from Jay Oram on CodePen<\/a>.<\/p>\n
Different methods to make use of this CSS animation in emails<\/h2>\n<\/p>\n
Thanks once more to Jay Oram of ActionRocket<\/a> for the tutorial and code snippets above.<\/p>\n
Christmas solely comes annually, however you should utilize this CSS animation all 12 months lengthy for those who put your creativity cap on. Listed here are a couple of concepts to get you began:<\/p>\n