{"id":3851,"date":"2018-08-02T20:42:35","date_gmt":"2018-08-02T20:42:35","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3851"},"modified":"2018-08-02T22:16:34","modified_gmt":"2018-08-02T22:16:34","slug":"fade-in-text-effects-for-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/fade-in-text-effects-for-email\/","title":{"rendered":"Fade in Text Effects for Email"},"content":{"rendered":"<div style=\"font-size:30px;line-height:1.5;font-weight:bold;font-family:Helvetica,Arial,sans-serif;background-color:#6490b2;color:#ffffff;padding:40px;background-image:url(https:\/\/freshinbox.com\/images\/backgrounds\/skyscraper.jpg);background-size:cover;width:100%;max-width:400px;text-align:center;\">\n<div class=\"xline1\">Fade<\/div>\n<div class=\"xline2\">In<\/div>\n<div class=\"xline3\">Effect<\/div>\n<\/div>\n<style>\n  .xline1,.xline2,.xline3{\n    opacity:0;\n    display:block;\n    animation: xslidein 2s 0s forwards;\n    animation-timing-function: ease-out;\n    animation-delay:1s;\n    text-shadow:1px 1px 1px #222222;\n  }\n  .xline2{\n    animation-delay:2.5s;\n  }\n  .xline3{\n    animation-delay:4s;\n  }\n@keyframes xslidein{\n  0%{opacity:0;\n    transform:translateY(-25px);\n  }\n  40%,100%{\n    opacity:1;\n    transform:translateY(0px);\n  }\n}\n<\/style>\n<div id=\"email-me\">\n  <input type=email id=\"email-me-email\" placeholder=\"Email address\"> <input id=\"email-me-btn\" type=button value=\"See Example In Your Inbox\" style=\"-webkit-appearance: none;\">\n<\/div>\n<p><BR><\/p>\n<p>Adding subtle text animations in your email hero area can add some sophistication into your design. Although not every email client <a href=\"https:\/\/freshinbox.com\/resources\/css.php\">supports CSS animations<\/a>, here is a simple technique you can use to display a slow drop down and fade in effect in your email design.<\/p>\n<p>The nice part about this technique is that you don&#8217;t need to have a fallback design, clients that don&#8217;t support animation just display the text.<\/p>\n<p>This technique is that it also contains a fix for a common glitch that iOS Mail sometimes exhibit where the <a href=\"https:\/\/freshinbox.com\/blog\/how-to-fix-jittery-css-animations-in-ios-mail\/\">animations appear jittery<\/a>.<BR><BR><\/p>\n<h4>Fade In<\/h4>\n<p>We start with fade-in, the technique is pretty straightforward. Wrap a div around the text that you want to animate and add a class (ie &#8220;line&#8221;). Then in the CSS style block add an animation that goes from opacity:0 to opacity:1.<\/p>\n<pre class=\"lang:default decode:true \" >.line{\r\n  opacity:0;\r\n  display:block;\r\n  animation: slidein 1s ease-out forwards;\r\n}\r\n@keyframes slidein{\r\n  0%{ opacity:0; }\r\n  100%{ opacity:1; }\r\n}\r\n<\/pre>\n<p><BR><BR> <\/p>\n<h4>Fade In and Drop Down<\/h4>\n<p>Then we add CSS translate transforms that move the text down while the text appears. We make the initial position 25 pixels higher so that the text rests at its original position when it ends.<\/p>\n<pre class=\"lang:default decode:true \" >.line{\r\n  opacity:0;\r\n  display:block;\r\n  animation: slidein 1s ease-out forwards;\r\n}\r\n@keyframes slidein{\r\n  0%{ opacity:0; transform:translateY(-25px); }\r\n  100%{ opacity:1; transform:translateY(0px); }\r\n}<\/pre>\n<p><BR><BR> <\/p>\n<h4>iOS Animation Glitch Fix<\/h4>\n<p>One of the issues with iOS Mail is that sometimes animations don&#8217;t run smoothly when there are multiple apps running in the background. There is a hack where we increase the duration but finish the animation earlier in the sequence. This article explains the <a href=\"https:\/\/freshinbox.com\/blog\/how-to-fix-jittery-css-animations-in-ios-mail\/\">nitty gritty of the iOS glitch<\/a>.<\/p>\n<p>In this example we increase the duration from 1s to 2s but complete the animation at the 40% mark (technically it should be 50% but I found 40% to work better). Make sure to test your designs to ensure it works as you envisioned!<\/p>\n<pre class=\"lang:default decode:true \" >.line{\r\n  opacity:0;\r\n  display:block;\r\n  animation: slidein 2s ease-out forwards;\r\n}\r\n@keyframes slidein{\r\n  0%{ opacity:0; transform:translateY(-25px); }\r\n  40%, 100%{ opacity:1; transform:translateY(0px); }\r\n}<\/pre>\n<p><BR><BR> <\/p>\n<h4>Completing the Example<\/h4>\n<p>We complete the example by adding animation-delay to allow multiple lines to begin one after another and we wrap our animation code within a -webkit-device-pixel-ratio media query. This media query ensures that only Webkit and therefore animation capable email clients execute the code. The clients include iOS Mail, Apple Mail, Samsung Mail and Outlook for Mac.<\/p>\n<p>Normally we wouldn&#8217;t need to hide our animation since clients that don&#8217;t support animations just ignore the statement but for this example, I&#8217;m setting the opacity of the text to 0 initially so I need to ensure clients that don&#8217;t support animations unintentionally hide the text.<\/p>\n<p><b>What about -webkit prefixes for animations?<\/b><\/p>\n<p>I&#8217;ve found that -webkit prefixes are no longer required for animations in email. I wrote my thoughts <a href=\"https:\/\/freshinbox.com\/blog\/using-webkit-is-no-longer-needed-for-css-animations-in-email\/\">in this article<\/a>.<\/p>\n<p data-height=\"274\" data-theme-id=\"12191\" data-slug-hash=\"WKJKdw\" data-default-tab=\"result\" data-user=\"freshinbox\" data-pen-title=\"Fade In CSS Animations For Email\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/freshinbox\/pen\/WKJKdw\/\">Fade In CSS Animations For Email<\/a> by FreshInbox (<a href=\"https:\/\/codepen.io\/freshinbox\">@freshinbox<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><BR><BR><BR><\/p>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div>\n<style>\n#email-me-email {\n  width:150px;\n  height:20px;\n  margin-bottom: 5px;\n  background-color: #FAFCEF;\n  font-size: 14px;\n  padding: 3px 5px;\n  display:inline-block;\n  border-radius:3px;\n  margin-left:20px;\n}\n#email-me-btn {\n  cursor: pointer;\n  font-size: 14px;\n  color: white;\n  text-decoration:none;\n  text-shadow:#555555 0 1px;\n  background-color: #7DC442;\n  padding: 5px 12px;\n  border:1px solid #559621;\n  border-radius: 5px;\n  display:inline-block;\n}\n#email-me-btn:hover {\n  background-color: #78D62C;\n}\n#email-me{\n  width: 400px;\n  padding:20px 0px;\n  xborder:3px solid #888888;\n  xborder-radius: 5px;\n  margin:0px auto;\n}\n<\/style>\n<p><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><br \/>\n<script>\n  var theEmail = null;\n  $(document).ready(function(){\n    $('#email-me-btn').click(function(){\n      theEmail = $('#email-me-email').val();\n      sendEmail(theEmail);\n    });\n    $(\"#email-me-email\").keypress(function(e) {\n      if(e.which == 13) {\n        theEmail = $('#email-me-email').val();        \n        sendEmail(theEmail);\n      }\n    });\n  });\n  var sendEmail = function(emailAddr){\n    if(!emailAddr || emailAddr.length < 12){\n      alert('Please enter an email');\n      return;\n    }\n    $('#email-me-email').val('sending...');\n    $.ajax({\n      url: \"https:\/\/freshinbox.com\/examples\/fade-in\/mail_example.php\",\n      data: {\n        email: emailAddr\n      },\n      success: function( data ) {\n        if(data == null || data.indexOf(\"ERROR\") != -1){\n          alert(\"There was a problem sending the email \\n\"+data);\n        }else{\n          alert(\"An email has been sent to \"+emailAddr+\"!\\n (Be sure to check the spam folder just in case)\");          \n        }\n        $('#email-me-email').val('');\n      }\n    });\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding subtle text animations in your email hero area can add some sophistication into your design. Although not every email client supports CSS animations, here is a simple technique you can use to display a slow drop down and fade in effect in your email design.<BR><BR><\/p>\n<p>The nice part about this technique is that you don&#8217;t need to have a fallback design, clients that don&#8217;t support animation just display the text.<\/p>\n","protected":false},"author":2,"featured_media":3858,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,24,25,47],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3851"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3851"}],"version-history":[{"count":14,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3851\/revisions"}],"predecessor-version":[{"id":3867,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3851\/revisions\/3867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/3858"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}