[css-animations] @Keyframes rules cascade; include example

Author: Sylvain Galineau

css-animations/Overview.bs

@@ -194,11 +194,60 @@ Keyframes</h2>
 	Issue: Need to describe what happens if a property is not present in all keyframes.
 
 	The @keyframes rule that is used by an animation will be the last one encountered in sorted rules
-	order that matches the name of the animation specified by the 'animation-name' property. @keyframes
-	rules do not cascade; therefore, an animation will never derive keyframes from more than one
+	order that matches the name of the animation specified by the 'animation-name' property. It must be
+	noted that @keyframes rules cascade; therefore, an animation may derive keyframes from more than one
 	@keyframes rule.
 
-	Note: Since empty @keyframes rule are valid, they may hide the keyframes of those
+	<div class='example'>
+		<pre>
+		div {
+		  animation-name: slide-right;
+		  animation-duration: 2s;
+		}
+
+		@keyframes slide-right {
+
+		  from {
+		    margin-left: 0px;
+		  }
+		  
+		  50% {
+		  	margin-left: 110px;
+		  	opacity: 1;
+		  }
+
+		  50% {
+		  	 opacity: 0.9;
+		  }
+
+		  to {
+		    margin-left: 200px;
+		  }
+
+		}
+		</pre>
+
+		At the 1s mark, the slide-right animation will have the same state as if we had defined the 50% rule like this:
+
+		<pre>
+		
+		@keyframes slide-right {
+		  
+		  50% {
+		  	margin-left: 110px;
+		  	opacity: 0.9;
+		  }
+
+		  to {
+		    margin-left: 200px;
+		  }
+
+		}
+		</pre>		
+
+	</div>
+
+	Note: Since empty @keyframes rules are valid, they may hide the keyframes of those
 	preceding animation definitions with a matching name.
 
 	To determine the set of keyframes, all of the values in the selectors are sorted in increasing order
@@ -985,7 +1034,7 @@ Working Group Resolutions that are pending editing</h2>
     	<li>2013-02-20 minutes
     		<ul>
     		<li><del>Øyvind's clarification accepted</del>
-    		<li>keyframe rules cascade
+    		<li><del>keyframe rules cascade</del>
     		<li>mark pseudoElement at-risk
     		</ul>
     	<li>2013-05-30 minutes