Rasterization & will-change: transform sample (#394)

* Rasterization & will-change: transform sample

* Review feedback.

css-will-change-transform-rasterization/README.md

@@ -0,0 +1,5 @@
+Rasterization & will-change: transform Sample
+=============================================
+See https://googlechrome.github.io/samples/css-will-change-transform-rasterization/index.html for a live demo.
+
+Learn more at https://www.chromestatus.com/feature/5637351992721408

css-will-change-transform-rasterization/demo.js

@@ -0,0 +1,9 @@
+window.addEventListener('load', function() {
+  requestAnimationFrame(function() {
+    var remainsBlurry = document.querySelector('#remainsBlurry');
+    remainsBlurry.style.transform = 'scale(2, 2) translate3d(50px, 0, 0)';
+
+    var noLongerBlurry = document.querySelector('#noLongerBlurry');
+    noLongerBlurry.style.transform = 'scale(2, 2) translate3d(50px, 0, 0)';
+  });
+});

css-will-change-transform-rasterization/index.html

@@ -0,0 +1,64 @@
+---
+feature_name: "Rasterization & will-change: transform"
+chrome_version: 53
+feature_id: 5637351992721408
+---
+
+<style>
+  #container {
+    margin-left: 50px;
+    margin-top: 100px;
+  }
+
+  #container > div {
+    height: 50px;
+    width: 300px;
+  }
+</style>
+
+<h3>Background</h3>
+<p>
+  All content that does not have the <code>will-change: transform</code> CSS
+  property will be re-rastered when its transform scale changes. In other words,
+  <code>will-change: transform</code> effectively means "please apply the transformation quickly"
+  without taking the additional time for rasterization. This only applies to
+  scaling that happen via JavaScript manipulation, and does not apply to CSS
+  animations.
+</p>
+
+<p>
+  More detailed background information is available in the
+  <a href="https://docs.google.com/document/d/1f8WS99F9GORWP_m74l_JfsTHgCrHkbEorHYu72D4Xag/edit">Intent to Ship</a> document.
+</p>
+
+<h3>Live Output</h3>
+<p>
+  You can see the impact in the sample text below:
+</p>
+
+{% capture html %}
+<div id="container">
+  <div id="remainsBlurry">always blurry</div>
+  <div id="noLongerBlurry">blurry before Chrome 53</div>
+  <div id="alwaysCrisp">always crisp</div>
+</div>
+{% endcapture %}
+{% include html_snippet.html html=html %}
+
+{% capture css %}
+#remainsBlurry {
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
+}
+
+#noLongerBlurry {
+  transform: translate3d(0, 0, 0);
+}
+
+#alwaysCrisp {
+  transform: scale(2, 2) translate3d(50px, 0, 0);
+}
+{% endcapture %}
+{% include css_snippet.html css=css %}
+
+{% include js_snippet.html filename='demo.js' %}