[css-easing-1] Add example of when easing functions are chained together

Fixes #5877

Author: birtles

css-easing-1/Overview.bs

@@ -95,6 +95,19 @@ The <dfn>input progress value</dfn> is a real number in the range [-&infin;,
 Typically, the [=input progress value=] is in the range [0, 1] but this may
 not be the case when [=easing functions=] are chained together.
 
+<div class=note>
+
+An example of when easing functions are chained together occurs in
+Web Animations [[WEB-ANIMATIONS]]
+where the output of the easing function specified on an animation effect
+may become the input to an easing function specified on
+one of the keyframes of a keyframe effect.
+In this scenario,
+the input to the easing function on the keyframe effect
+may be outside the range [0, 1].
+
+</div>
+
 The <dfn>output progress value</dfn> is a real number in the
 range [-&infin;, &infin;].