{"id":17692,"date":"2018-01-09T12:30:05","date_gmt":"2018-01-09T12:30:05","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=17692"},"modified":"2018-01-09T12:30:05","modified_gmt":"2018-01-09T12:30:05","slug":"should-you-use-css-or-javascript-for-web-animations","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/","title":{"rendered":"Should you use CSS or JavaScript for web animations?"},"content":{"rendered":"<p>When should you use CSS for animations? When should you use JavaScript for animations? Is one better than the other?<\/p>\n<p>Should you always try to use CSS to animate your components as much as you can? What about &#8220;hardware acceleration&#8221;?<\/p>\n<p>These questions ran through my head as I learned to animate websites. When I first started, I read so much about &#8220;hardware acceleration&#8221; and downsides of using JavaScript that I focused entirely on CSS for all my animations.<\/p>\n<p>I actively avoided JavaScript because I thought JavaScript animations didn&#8217;t perform well. Besides, I didn&#8217;t want to be <em>that guy<\/em> that doesn&#8217;t provide a good experience for people who don&#8217;t have JavaScript.<\/p>\n<p>I only realised much later that I made my life insanely difficult by avoiding JavaScript. To make things worse, I created inaccessible websites while trying to avoid JavaScript altogether.<\/p>\n<p>So, I learned that you can use both CSS and JavaScript to create animations. The question is when to use which.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/AoiHvLid2TE\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h3>Creating silky smooth animations<\/h3>\n<p>If you have the misconception that JavaScript can\u2019t be used to produce smooth animations, you can drop it now. <strong>Both CSS and JavaScript can be used to produce silky smooth animations.<\/strong> You don&#8217;t need everything to be &#8220;hardware-accelerated&#8221;.<\/p>\n<p>Why is that so?<\/p>\n<p>Many computers refresh at a rate of 60 frames per second. For your animations to be smooth, the browser needs to update your animation within this rate. In other words, <strong>browsers need to update your website at least once every 16 milliseconds<\/strong> (ie once every 60th of a second).<\/p>\n<p>So, your job is to make sure you don&#8217;t create animations that require browsers to do so much work that it can&#8217;t update the screen within 16 milliseconds.<\/p>\n<p>To ensure the browser doesn&#8217;t do extra hard work, you should only change the following four properties. (Find out  why in Paul Lewis\u2019 and Paul Irish\u2019s article on <a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/\" target=\"_blank\">High Performance Animations<\/a>). It doesn&#8217;t matter whether you change them with CSS or JavaScript.<\/p>\n<ol>\n<li>Translate (from the <code>transform<\/code> property)<\/li>\n<li>Rotate (from the <code>transform<\/code> property)<\/li>\n<li>Scale (from the <code>transform<\/code> property)<\/li>\n<li>Opacity<\/li>\n<\/ol>\n<p>With performance-related questions out of the way, let&#8217;s focus on when to use CSS\/JavaScript for your animations.<\/p>\n<h3>Animating with CSS and JavaScript<\/h3>\n<p>There are three ways you can create animations:<\/p>\n<ol>\n<li>With CSS transitions<\/li>\n<li>With CSS animations<\/li>\n<li>With JavaScript<\/li>\n<\/ol>\n<h4>When to use CSS transitions<\/h4>\n<p><a href=\"https:\/\/zellwk.com\/blog\/css-transitions\/\" target=\"_blank\">CSS transitions<\/a> allow you to change CSS properties between two states \u2014 the beginning state and the end state.<\/p>\n<p>To use CSS transitions, you specify the properties you want to animate with the <code>transition<\/code> property.<\/p>\n<p><code>button {<br \/>\n&nbsp;&nbsp;background-color: turquoise;<br \/>\n&nbsp;&nbsp;transition: background-color 0.3s ease-out;<br \/>\n}<\/code><\/p>\n<p><code>button:hover {<br \/>\n&nbsp;&nbsp;background-color: pink;<br \/>\n}<\/code><\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptanimations-pinkbutton.gif\" alt=\"Animated GIF where a Click Here button changes from turquoise to pink when hovered over\" width=\"488\" height=\"162\" class=\"aligncenter size-full wp-image-17707\" \/><br \/>\nChanging a button&#8217;s <code>background-color<\/code> property from turquoise to pink.<\/p>\n<p>You can also transit properties with the help of JavaScript. To do so, you can either change the property directly, or add\/remove a class to\/from the element.<\/p>\n<p><code>\/\/ Changing a CSS property<br \/>\nbutton.style.backgroundColor = 'blue'<\/code><\/p>\n<p><code>\/\/ Adding a class<br \/>\nbutton.classList.add('is-selected');<\/code><\/p>\n<p><code>\/\/ Removing a class<br \/>\nbutton.classList.remove('is-selected');<\/code><\/p>\n<p>CSS transitions are best for simple animations that contains only two states. When you need to animate something over multiple different states, you might want to consider CSS animations or JavaScript.<\/p>\n<h4>When to use CSS animations<\/h4>\n<p>CSS animations allow you to animate any CSS property through any number of states. You can even use it to create a slightly-more-complicated animation like this hand-waving animation:<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptanimations-wave.gif\" alt=\"Animated GIF of a hand waving\" width=\"564\" height=\"576\" class=\"aligncenter size-full wp-image-17713\" \/><br \/>\nA multi-state hand waving animation.<\/p>\n<p>To create a CSS animation, you specify the properties you want to animate with the <code>animation<\/code> property, and you declare your animation with <code>@keyframes<\/code>.<\/p>\n<p><code>\/* Declaring the animation *\/<br \/>\n@keyframes swing {<br \/>\n&nbsp;&nbsp;0% {<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(-3em);<br \/>\n&nbsp;&nbsp;}<\/code><\/p>\n<p><code>&nbsp;&nbsp;100% {<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(0);<br \/>\n&nbsp;&nbsp;}<br \/>\n}<\/code><\/p>\n<p><code>\/* Specifying the animation *\/<br \/>\nbutton {<br \/>\n&nbsp;&nbsp;animation: swing 1s ease-in-out infinite alternate;<br \/>\n}<\/code><\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptanimations-slidingclick.gif\" alt=\"Animated GIF of a Click Me button sliding from left to right\" width=\"352\" height=\"144\" class=\"aligncenter size-full wp-image-17710\" \/><br \/>\nAnimation of a button swinging left and right.<\/p>\n<p>To create the hand-waving animation, you first have to code all six possible states into your <code>@keyframes<\/code> declaration. It looks like this:<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptanimations-handstates.png\" alt=\"Six different states for the hand to set up the animation\" width=\"981\" height=\"758\" class=\"aligncenter size-full wp-image-17701\" \/><br \/>\nSix different states for the hand.<\/p>\n<p><code>@keyframes wave {<br \/>\n&nbsp;&nbsp;0% { transform: rotate(0); }<br \/>\n&nbsp;&nbsp;20% { transform: rotate(15deg); }<br \/>\n&nbsp;&nbsp;40% { transform: rotate(-15deg); }<br \/>\n&nbsp;&nbsp;60% { transform: rotate(15deg); }<br \/>\n&nbsp;&nbsp;80% { transform: rotate(-15deg); }<br \/>\n&nbsp;&nbsp;100% { transform: rotate(0); }<br \/>\n}<\/code><\/p>\n<p><code>.wave-hand {<br \/>\n&nbsp;&nbsp;transform-origin: bottom center;<br \/>\n&nbsp;&nbsp;animation: wave 1s ease-in-out infinite;<br \/>\n}<\/code><\/p>\n<p>Notice the percentages like <code>0%<\/code> and <code>40%<\/code> in the <code>@keyframes<\/code> syntax above? These percentages indicate the CSS values to display on your site at that completion rate.<\/p>\n<p>Let&#8217;s say you have an animation that lasts two seconds. A <code>50%<\/code> would mean the one-second mark while <code>75%<\/code> would mean the one-and-a-half-second mark. If your animation lasts four seconds, <code>50%<\/code> would mean the two-second mark, while <code>75%<\/code> would mean the three-second mark.<\/p>\n<p>When you first code your animation, you will likely not be able to correctly identify your animation duration between each state, so you&#8217;ll have to recalculate the percentages a couple of times. It&#8217;s a chore.<\/p>\n<p>For this reason, I highly recommend you use JavaScript animation libraries to give yourself a better experience when creating animations.<\/p>\n<p>The only exception is when you need your animations to run without JavaScript \u2014 then CSS animations are preferred.<\/p>\n<h4>When to use JavaScript<\/h4>\n<p>Well, you probably have a good idea by now \u2014 when you have an animation that&#8217;s complex (which means you can&#8217;t use CSS transitions, and it&#8217;s hard to use CSS animations), you\u2019ll want to use JavaScript.<\/p>\n<p>When you use JavaScript to animate, you change the value of a CSS property over time. This process can be done manually (you calculate and set the value of a CSS property at every frame) or through a JavaScript library (like the <a href=\"https:\/\/greensock.com\/\" target=\"_blank\">Greensock Animation API<\/a>).<\/p>\n<p>If you inspect the console, you&#8217;ll see how quickly JavaScript updates the CSS property (in this case, <code>transform<\/code>).<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptanimations-javascriptclick.gif\" alt=\"Animated GIF showing how the JavaScript updates the CSS property for the Click Me button\" width=\"676\" height=\"334\" class=\"aligncenter size-full wp-image-17704\" \/><br \/>\nJavaScript updates the transform property over time.<\/p>\n<p>If you&#8217;ve been keeping up with the latest developments, you&#8217;ll also know you can create animations through the Web Animations API, which means you don&#8217;t need to use an external animation library.<\/p>\n<p>Sadly, at the time of writing, the Web Animations API is still not ready for prime time.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/cssjavascriptionanimations-api-1024x430.png\" alt=\"Image listing the browser support for the Web Animations API\" width=\"850\" height=\"357\" class=\"aligncenter size-large wp-image-17716\" \/><br \/>\nSupport for Web Animations API is still lackluster at this point.<\/p>\n<p>When you create animations with JavaScript, I highly recommend you use the Greensock Animation API (GSAP). It&#8217;s the fastest and most well-supported library out there. There\u2019s an introductory tutorial to help you <a href=\"https:\/\/zellwk.com\/blog\/gsap\/\" target=\"_blank\">get started with GSAP<\/a> on my site.<\/p>\n<p>If you want inspiration of things built with GSAP, you can check out <a href=\"https:\/\/codepen.io\/sdras\/\" target=\"_blank\">Sarah Drasner&#8217;s<\/a> and <a href=\"https:\/\/codepen.io\/chrisgannon\/\" target=\"_blank\">Chris Gannon&#8217;s<\/a> CodePens. They&#8217;re amazing.<\/p>\n<h3>But what if people don&#8217;t have JavaScript?<\/h3>\n<p>When would you animate things? Think about this question for a moment.<\/p>\n<p>Usually, you either animate things right when the page loads, or when a user interacts with a specific element on your page (like click a button).<\/p>\n<p>If you need to animate things when your page loads, you can rely on CSS animations. No worries about that.<\/p>\n<p>If you need to animate things when a user interacts with elements on your page, you can&#8217;t run away from JavaScript.<\/p>\n<p>Why?<\/p>\n<p>You can only tell if a user has interacted with an element if you&#8217;ve added an event listener to the document\/element. Adding an event listener requires JavaScript, so most of your animations (CSS transitions or otherwise) wouldn&#8217;t work without JavaScript anyway.<\/p>\n<p>Then, the question isn&#8217;t about supporting animations for users without JavaScript. They simply don&#8217;t get any animations from their interactions.<\/p>\n<p>So what you should do is to make sure your site works well without animation. Your users should be able to see what they came to your site for \u2014 your content \u2014 even without JavaScript turned on.<\/p>\n<p>When users with JavaScript come to your site, you can give them an enhanced experience with animations. Be liberal with your use of JavaScript here.<\/p>\n<p>This is a concept called progressive enhancement. If you&#8217;d like to find out more it, you can follow <a href=\"https:\/\/twitter.com\/AaronGustafson\" target=\"_blank\">Aaron Gustafson<\/a>, listen to <a href=\"http:\/\/thewebahead.net\/105\" target=\"_blank\">this episode of The Web Ahead podcast<\/a>, or read Aaron\u2019s evergreen article <a href=\"https:\/\/alistapart.com\/article\/understandingprogressiveenhancement\" target=\"_blank\">Understanding Progressive Enhancement<\/a> on A List Apart.<\/p>\n<h3>Wrapping up<\/h3>\n<p>You can use CSS and JavaScript to create animations. What you use depends on the complexity of the animation.<\/p>\n<p>For simple two-state animations, I recommend you use CSS transitions. For more complicated animations, I recommend you use CSS animations or JavaScript.<\/p>\n<p>At the time of writing, the Web Animations API is still not well supported yet, so the best possible way to animate is with GSAP, which is an amazing library.<\/p>\n<p>Make sure you provide a non-animated, but workable version of your site for people who don&#8217;t have JavaScript enabled. They should still be able to use your website even when it&#8217;s not animated.<\/p>\n<p>If you found this article helpful and would like to read more articles like this one, feel free to pop over to <a href=\"https:\/\/zellwk.com\/\" target=\"_blank\" rel=\"nofollow\">my website<\/a>.<\/p>\n<p>You may also like <em><strong><a href=\"https:\/\/learnjavascript.today\/\" target=\"_blank\">Learn JavaScript<\/a><\/strong><\/em> \u2014 a course that helps you learn to <em>build real components from scratch<\/em> with JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.<\/p>\n","protected":false},"author":2,"featured_media":17698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-17692","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Should you use CSS or JavaScript for web animations? - Heart Internet<\/title>\n<meta name=\"description\" content=\"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Should you use CSS or JavaScript for web animations? - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-09T12:30:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1265\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Should you use CSS or JavaScript for web animations?\",\"datePublished\":\"2018-01-09T12:30:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\"},\"wordCount\":1354,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\",\"name\":\"Should you use CSS or JavaScript for web animations? - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg\",\"datePublished\":\"2018-01-09T12:30:05+00:00\",\"description\":\"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg\",\"width\":1265,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Should you use CSS or JavaScript for web animations?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Should you use CSS or JavaScript for web animations? - Heart Internet","description":"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/","og_locale":"en_GB","og_type":"article","og_title":"Should you use CSS or JavaScript for web animations? - Heart Internet","og_description":"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.","og_url":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2018-01-09T12:30:05+00:00","og_image":[{"width":1265,"height":500,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Should you use CSS or JavaScript for web animations?","datePublished":"2018-01-09T12:30:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/"},"wordCount":1354,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/","url":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/","name":"Should you use CSS or JavaScript for web animations? - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg","datePublished":"2018-01-09T12:30:05+00:00","description":"When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/01\/cssjavascriptanimations-background.jpg","width":1265,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Should you use CSS or JavaScript for web animations?"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/17692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=17692"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/17692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/17698"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=17692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=17692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=17692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}