{"id":197380,"date":"2015-03-05T11:50:21","date_gmt":"2015-03-05T18:50:21","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=197380"},"modified":"2021-07-14T11:58:12","modified_gmt":"2021-07-14T18:58:12","slug":"will-change","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/","title":{"rendered":"will-change"},"content":{"rendered":"\n<p>The <code>will-change<\/code> property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">will-change: &lt;animateable-feature> = scroll-position | contents | &lt;custom-ident><\/code><\/pre>\n\n\n\n<ul class=\"ticss-8bdc4622\"><li><strong>Initial value:<\/strong> <code>auto<\/code><\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> specific valued<\/li><li><strong>Animation type:<\/strong> not animatable<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<p>This property has four values:<\/p>\n\n\n\n<ul><li><code>auto<\/code>: standard browser optimizations will be applied.<\/li><li><code>scroll-position<\/code>: indicates that the element\u2019s scroll position will be animated sometime in the near future so the browser will prepare for content which is not visible in the scroll window of an element.<\/li><li><code>contents<\/code>: the contents of an element is expected to change so the browser will not cache this element\u2019s content.<\/li><li><code>&lt;custom-ident><\/code>: any user-defined property such as <code>transform<\/code> or <code>opacity<\/code> that we want <code>will-change<\/code> to be applied to.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-the-property\">Using the property<\/h3>\n\n\n<p>We can inform the browser that a change is about to take place to the <code>transform<\/code> property like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  will-change: transform;\n}<\/code><\/pre>\n\n\n\n<p>Or if we want to declare multiple values we can use a comma-separated list such as:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  will-change: transform, opacity;\n}<\/code><\/pre>\n\n\n\n<p>It&#8217;s important not to overuse the <code>will-change<\/code> property however since it might, in fact, cause the page to be less performant (note that there is not an <code>all<\/code> value for this property for a good reason). As a result, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/will-change\" rel=\"noopener\">MDN recommends<\/a> that the property be used as a last resort for existing performance issues rather than ones you anticipate could happen. And, when using it, it&#8217;s recommended to toggle <code>will-change<\/code> just before an element or property changes and then toggle it off again shortly after the process is finished.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/dev.opera.com\/articles\/css-will-change-property\/\" rel=\"noopener\">Sara Soueidan\u2019s detailed walkthrough<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/will-change\" rel=\"noopener\"><code>will-change<\/code> on MDN<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css-will-change-1\/\" rel=\"noopener\"><code>will-change<\/code> on W3C<\/a><\/li><li><a href=\"http:\/\/cssmojo.com\/the-dark-side-of-the-will-change-property\/\" rel=\"noopener\">&#8220;What nobody tells you about will-change&#8221;<\/a> by Thierry Koblentz<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=will-change\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">9.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">9.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-specification\">Specification<\/h3>\n\n\n<p><code>will-change<\/code> is defined in the <a href=\"https:\/\/drafts.csswg.org\/css-will-change\/#will-change\" rel=\"noopener\">CSS Will Change Module Level 1<\/a> specification, which is currently in Editor&#8217;s Draft status. This means the information provided here and in the specification could change before it reaches candidate recommendation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-197380\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Mar 5, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 27, 2023  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\">\n      transform    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform: scale(2); }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/animation\/\" rel=\"tag\">animation<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/will-change\/\" rel=\"tag\">will-change<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation. Syntax Initial value: auto Applies to: all elements Inherited: no Percentages: n\/a Computed value: specific valued Animation type: not animatable Values This property has four [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13955,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[612,1311],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/197380"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=197380"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/197380\/revisions"}],"predecessor-version":[{"id":344720,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/197380\/revisions\/344720"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=197380"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=197380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}