{"id":278653,"date":"2018-11-15T15:55:43","date_gmt":"2018-11-15T22:55:43","guid":{"rendered":"http:\/\/css-tricks.com\/?p=278653"},"modified":"2018-11-15T15:55:43","modified_gmt":"2018-11-15T22:55:43","slug":"css-animations-and-transitions-in-email","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-animations-and-transitions-in-email\/","title":{"rendered":"CSS Animations and Transitions in Email"},"content":{"rendered":"
We don’t generally think of CSS animations or transitions inside of email, or really any movement at all outside of an awkward occasional GIF. But there is really no reason you can’t use them inside HTML emails, particularly if you do it in a progressive enhancement-friendly way. Like, you could style a link with a hover state<\/a> and a shaking animation<\/a>, but if the animation (or even the hover) doesn’t work, it’s still a functional link. Heck, you can use CSS grid in email, believe it or not<\/a>. <\/p>\n Jason Rodriguez just wrote Understanding CSS Animations in Email: Transitions and Keyframe Animations<\/a> that covers some of the possibilities. On the supported list of email clients that support CSS transitions and keyframe animations is Apple Mail, Outlook, and AOL mail, among others. <\/p>\n Other things to look at:<\/p>\n We don’t generally think of CSS animations or transitions inside of email, or really any movement at all outside of an awkward occasional GIF. But there is really no reason you can’t use them inside HTML emails, particularly if you do it in a progressive enhancement-friendly way. Like, you could style a link with a […]<\/p>\n","protected":false},"author":3,"featured_media":278802,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"CSS Animations and Transitions in Email","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1086],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/email-open-cloe.gif?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":179204,"url":"https:\/\/css-tricks.com\/add-page-transitions-css-smoothstate-js\/","url_meta":{"origin":278653,"position":0},"title":"How To Add Page Transitions with CSS and smoothState.js","date":"August 15, 2014","format":false,"excerpt":"CSS animations (and a little JavaScript trickery) can let us add page transitions and move away from the hard-cut of page loads. My jQuery plugin smoothState.js helps polish those transitions and improve UI response times. Page transitions benefit the user experience Imagine, for a second, how disorienting it would be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":209210,"url":"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/","url_meta":{"origin":278653,"position":1},"title":"Using Multi-Step Animations and Transitions","date":"December 10, 2015","format":false,"excerpt":"CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven't worked with them, you can level up on the syntax right here in the Almanac. While the concept is simple, there\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":149995,"url":"https:\/\/css-tricks.com\/controlling-css-animations-transitions-javascript\/","url_meta":{"origin":278653,"position":2},"title":"Controlling CSS Animations and Transitions with JavaScript","date":"September 17, 2013","format":false,"excerpt":"The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":248631,"url":"https:\/\/css-tricks.com\/web-animation-essentials-css-animations-transitions\/","url_meta":{"origin":278653,"position":3},"title":"Web Animation Essentials: CSS Animations and Transitions","date":"December 4, 2016","format":false,"excerpt":"A brand new course by Rachel Nabors. There is a lot here: learning the code and learning the tools to help work with the code and make sure you're doing a good job. A couple favorite aspects of the course: Captioned videos you can understand without audio. Convenient CodePen exercises\u2013no\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":205264,"url":"https:\/\/css-tricks.com\/animations-the-angular-way\/","url_meta":{"origin":278653,"position":4},"title":"Animations: the Angular Way","date":"July 22, 2015","format":false,"excerpt":"AngularJS is a major player in the JavaScript MVW framework world. 'Thinking in Angular' is something that can elude developers who come from jQuery or other DOM manipulation heavy libraries. There is an 'Angular way' to do things that is data-driven rather than using DOM traversal to drive view changes,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376528,"url":"https:\/\/css-tricks.com\/animating-css-grid-how-to-examples\/","url_meta":{"origin":278653,"position":5},"title":"Animating CSS Grid (How To + Examples)","date":"January 25, 2023","format":false,"excerpt":"I\u2019m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid has technically supported animations for a long time, as it\u2019s baked right into the CSS Grid Layout Module Level 1 spec. But animating\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/grid-animation.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278653"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=278653"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278653\/revisions"}],"predecessor-version":[{"id":278803,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278653\/revisions\/278803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278802"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=278653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=278653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=278653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n