[css-animations-2] Add definition of owning element

Author: birtles

css-animations-2/Overview.bs

@@ -12,6 +12,11 @@ Editor: L. David Baron, Mozilla, dbaron@dbaron.org
 
 Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
 </pre>
+<pre class="anchors">
+urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
+    text: target element
+    text: target effect
+</pre>
 
 <h2 id="delta">Delta specification</h2>
 
@@ -20,6 +25,57 @@ only the differences from CSS Animations Level 1 [[!CSS3-ANIMATIONS]].
 Once the Level 1 specification is closer to complete, it will be merged
 with the additions here into a complete level 2 specification.</p>
 
+# Animations # {#animations}
+
+## Owning element ## {#owning-element-section}
+
+The <dfn>owning element</dfn> of a CSS Animation refers to the element or
+pseudo-element to which the 'animation-name' property was applied that generated
+the animation.
+
+If an animation was generated directly by script then it has no <a>owning
+element</a>.
+
+If an animation generated using the markup defined in this specification is
+later disassociated from that markup by an update to the computed value of the
+'animation-name' property on the <a>owning element</a>, the animation is
+disassociated from its <a>owning element</a> (that is, it has no <a>owning
+element</a> from that point forwards).
+
+<div class="note">
+
+In the example below, <code>animation</code>'s initial <a>owning element</a>
+is <code>elem</code>. <code>animation</code> is disassociated from
+<code>element</code> through an update to the computed value of
+<code>elem</code>'s 'animation-name' property.
+
+<pre class="example lang-javascript">
+elem.style.animation = 'spin 1s';
+let animation = elem.getAnimations()[0]; // animation's owning element is elem
+elem.style.animation = ''; // animation no longer has an owning element
+</pre>
+
+Note that although the <a>owning element</a> is often equal to the <a>target
+element</a> of an animation's <a>target effect</a>, this is not always the case.
+The following example demonstrates some of the situations where these two
+elements may differ.
+
+<pre class="example lang-javascript">
+elem.style.animation = 'move 1s';
+let animation = elem.getAnimations()[0];
+// animation.effect.target == elem == animation's owning element
+
+let mutableEffect = animation.effect.clone();
+animation.effect = mutableEffect;
+animation.effect.target = elem2;
+// animation.effect.target == elem2 != animation's owning element
+
+animation.effect = null;
+// animation.effect.target is undefined != animation's owning element
+</pre>
+
+</div>
+
 <h2 id="events">Animation Events</h2>
 
 <h3 id="event-animationevent">Types of <code>AnimationEvent</code></h3>