{"id":2263,"date":"2015-11-06T19:38:31","date_gmt":"2015-11-06T19:38:31","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2263"},"modified":"2018-08-02T16:32:45","modified_gmt":"2018-08-02T16:32:45","slug":"css-animation-entrance-effects-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/css-animation-entrance-effects-in-email\/","title":{"rendered":"CSS Animation Entrance Effects in Email"},"content":{"rendered":"
\n\n\n

<\/p>\n
Introducing<\/div>\n
CSS Animation<\/div>\n
Entrance Effects<\/div>\n

\n<\/td>\n<\/tr>\n<\/table>\n<\/div>\n

Codepen Link<\/a><\/div>\n
\n \n<\/div>\n


<\/p>\n

Entrance effects using CSS animation can add some flair to your email. Unlike more ambitious kinetic email designs<\/a> that may involve a lot of development time including the production of both kinetic and fallback versions of an email, entrance animation effects leveraging CSS 2D transforms can deliver some pizzaz without a lot of extra effort.<\/p>\n

For this post, we’ll cover two kinds of entrance effects, fly-in and pop-in.<\/p>\n

Read this article for more background on CSS animations in email<\/a> including support in email clients.

<\/p>\n

Entrance Effects<\/h4>\n

Everyone has seen entrance effects used in slides and presentations where content slides in or fades into the presentation. Although CSS animation support is limited to more modern email clients, these entrance effects are relatively simple to implement and may provide a cool effect to your email depending on your audience.<\/p>\n

The key to these examples below is that you can just code your emails the way you’re used to and only need to wrap the elements you want the effect with a div to have them come alive in email clients that support CSS animation<\/a>.
\n

<\/p>\n

Fly-in<\/h4>\n


<\/p>\n

\n
Fly from left<\/div>\n<\/div>\n

(Animation above repeats for illustration purposes)<\/span>

<\/p>\n

The fly-in or slide-in effect allows your content to fly-in from any direction. We’re going to use the CSS 2D Transform translate()<\/code> function<\/a> to achieve this effect.<\/p>\n

Although you can use other methods such as margin and absolute positioning to perform the fly-in animation, translate allows an element to be moved relative to its original position without affecting the elements around it<\/strong>. <\/p>\n

With 2D Transforms the element can grow, move or shrink and the elements around it behave as if the element has not moved. This is great since you don’t have to design your emails any differently to accommodate entrance effects.<\/p>\n

Note we’re using -webkit-<\/code> vendor prefixes because as of this posting that is the only kind of animation declaration supported by email clients that support CSS animations<\/a>. Add these in a <style><\/code> block:<\/p>\n

.fly-in-left{\r\n  -webkit-animation: flyinleftanim 1s ease; \r\n}\r\n@-webkit-keyframes flyinleftanim\r\n{\r\n  0% {-webkit-transform: translateX(-1000px);}       \r\n  100% {-webkit-transform: translateX(0px);}\r\n}<\/pre>\n
Then we wrap any element we want to “fly-in” with a div with the class “fly-in-left”. Now email clients that don’t support CSS animations will just display the content statically and clients that support CSS animations will display the content flying in from the left.<\/p>\n
 \r\n<div class=\"fly-in-left\">Fly from left<\/div>\r\n\r\n<\/pre>\n


 <\/p>\n
Adding a delay<\/b><\/p>\n
What if we want to add a delay before having the element “fly-in”? The obvious technique would be to add an animation-delay<\/code> property. However that would mean the content would be displayed for a brief moment before the fly-ing in – not what we want.<\/p>\n
We could address the issue above by styling it so the element is hidden before executing the animation, but the animation would revert to being hidden after it completes!<\/p>\n
We could address the next issue with animation-fill-mode: forwards;<\/code><\/a>. Which would leave the element visible at the end of the animation… BUT… this isn’t supported by some old Android clients (specifically 2.x – if you don’t need that support you can use this method).<\/p>\n
Our solution to the delay is to let the animation “do nothing” for a percentage of the time. The following 3 second animation starts the 1 second long fly-in at the 2 second (66%) mark.<\/p>\n
.fly-in-left{\r\n  -webkit-animation: flyinleftanim 3s ease; \r\n}\r\n@-webkit-keyframes flyinleftanim\r\n{\r\n  0% {-webkit-transform: translateX(-1000px);}       \r\n  66% {-webkit-transform: translateX(-1000px);}       \r\n  100% {-webkit-transform: translateX(0px);}\r\n}<\/pre>\n


<\/p>\n
Bounding the animation<\/b><\/p>\n
By default the elements will fly-in from the edge of the email. However if you’d prefer to have the fly-in effect from the edges of say a hero box, then add overflow: hidden<\/code> to the bounding area.<\/p>\n
On iOS, if you want an element to fly in from the right, you would need to wrap the animation within a bounding area with overflow set to hidden as well. Otherwise iOS will zoom out the email to display the initial location of the element “flying in” from the right.

<\/p>\n
Pop-in<\/h4>\n
\n
Pop In!<\/div>\n<\/div>\n

<\/p>\n
The pop-in effect is a combination of a fade-in and a quick grow and shrink animation. It uses the opacity style to fade in and the scale 2D transform to start the scaling from 75% of its size to 120% back to 100% to deliver the “pop”. Using the scale 2D transform vs using widths and heights – as mentioned in the last section allows the element to grow and shrink without affecting its surrounding elements.<\/p>\n
As you can see from the code below, there’s a significant time where the animation does “nothing” from 0-93%. That is so that we can spring the animation at the close to 2 second point. Modify these values to suit your needs. You can also use the animation-delay property subject to the caveats mentioned in the previous section.<\/p>\n
.pop-in{\r\n  -webkit-animation: popinanim 2s ease; \r\n}\r\n\r\n@-webkit-keyframes popinanim{\r\n  0% { \r\n    opacity:0;\r\n    -webkit-transform: scale(0.75);\r\n  }        \r\n  93% { \r\n    opacity:0;\r\n    -webkit-transform: scale(0.75);\r\n  }        \r\n  98% { \r\n    opacity:1;\r\n    -webkit-transform: scale(1.2);\r\n  }\r\n  100% { \r\n    opacity:1;\r\n    -webkit-transform: scale(1);\r\n  }\r\n} <\/pre>\n


 <\/p>\n
Where to learn more<\/h4>\n
Aside from getting some of the basics of using animation in email in the
\nlast article<\/a>, here are some other resources you can use.<\/p>\n