Add DOM interface example

Author: Sylvain Galineau

css-animations/Overview.bs

@@ -1034,6 +1034,66 @@ The <code>findRule</code> method</h4>
 
 	No Exceptions
 
+    <div class='example'>
+        For example, given the following animation:
+        <pre>
+        
+        @keyframes colorful-diagonal-slide {
+
+          from {
+            left: 0;
+            top: 0;
+          }
+
+          10% {
+            background-color: blue; 
+          }
+
+          10% {
+            background-color: green;
+          }
+
+          25%, 75% {
+            background-color: red;
+          }
+
+          100% {
+            left: 100px;
+            top: 100px;
+          }
+
+        }
+        </pre>
+
+        Assuming the variable <code>anim</code> holds a reference to a CSSKeyframesRule object for this animation, then:
+
+        <pre>
+        anim.deleteRule('10%');
+        var tenPercent = anim.findRule('10%');
+        </pre>
+
+        will start by deleting the last 10% rule i.e. the green background color rule; then find the remaining blue background rule and return it into <code>tenPercent</code>.
+
+        The following:
+        <pre>
+        var red = anim.findRule('75%');
+        </pre>
+
+        will set <code>red</code> to <code>null</code>. The full selector for the red background color rule must be used instead:
+
+        <pre>
+        var red = anim.findRule('25%,75%');
+        </pre>
+
+        Since ''from'' maps to 0% and ''to'' maps to 100%, we can find these rules using either value:
+
+        <pre>
+        var from = anim.findRule('0%'); // Returns from { left: 0; top: 0; } rule
+        var to = anim.findRule('to');   // Returns 100% { left: 100px; top: 100px; } rule
+        </pre>
+    </div>
+
+
 
 
 

css-animations/Overview.html

@@ -1762,6 +1762,83 @@ <h4 class="heading settled" data-level="6.3.5" id="interface-csskeyframesrule-fi
 
    <p>No Exceptions</p>
 
+    
+   <div class="example">
+        For example, given the following animation:
+        
+    <pre>        
+@keyframes colorful-diagonal-slide {
+
+  from {
+    left: 0;
+    top: 0;
+  }
+
+  10% {
+    background-color: blue; 
+  }
+
+  10% {
+    background-color: green;
+  }
+
+  25%, 75% {
+    background-color: red;
+  }
+
+  100% {
+    left: 100px;
+    top: 100px;
+  }
+
+}
+</pre>
+    
+
+
+    <p>Assuming the variable <code>anim</code> holds a reference to a CSSKeyframesRule object for this animation, then:</p>
+    
+
+        
+    <pre>anim.deleteRule('10%');
+var tenPercent = anim.findRule('10%');
+</pre>
+    
+
+
+    <p>will start by deleting the last 10% rule i.e. the green background color rule; then find the remaining blue background rule and return it into <code>tenPercent</code>.</p>
+    
+
+
+    <p>The following:</p>
+    
+        
+    <pre>var red = anim.findRule('75%');
+</pre>
+    
+
+
+    <p>will set <code>red</code> to <code>null</code>. The full selector for the red background color rule must be used instead:</p>
+    
+
+        
+    <pre>var red = anim.findRule('25%,75%');
+</pre>
+    
+
+
+    <p>Since <span class="css">from</span> maps to 0% and <span class="css">to</span> maps to 100%, we can find these rules using either value:</p>
+    
+
+        
+    <pre>var from = anim.findRule('0%'); // Returns from { left: 0; top: 0; } rule
+var to = anim.findRule('to');   // Returns 100% { left: 100px; top: 100px; } rule
+</pre>
+    
+    
+   </div>
+
+