Skip to content

Commit fa3b529

Browse files
birtlesbirtles
committed
[css-animations-2] Add animation-composition property
1 parent 75c440a commit fa3b529

File tree

2 files changed

+246
-0
lines changed

2 files changed

+246
-0
lines changed

‎css-animations-2/Overview.bs

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animation
4141
text: animation
4242
text: animation playback rate
4343
text: animation type
44+
text: composite operation
4445
text: current iteration
4546
text: current time
4647
text: global animation list
@@ -260,6 +261,96 @@ it must be set to true.
260261
261262
</div>
262263
264+
## The 'animation-composition' property ## {#animation-composition}
265+
266+
The 'animation-composition' property defines the <a>composite operation</a>
267+
used when multiple animations affect the same property simultaneously.
268+
269+
<pre class='propdef'>
270+
Name: animation-composition
271+
Value: <<single-animation-composition>>#
272+
Initial: replace
273+
Applies to: all elements, ::before and ::after pseudo-elements
274+
Inherited: none
275+
Animatable: no
276+
Percentages: N/A
277+
Media: interactive
278+
Computed value: As specified
279+
Canonical order: per grammar
280+
</pre>
281+
282+
<dfn>&lt;single-animation-composition></dfn> = replace | add | accumulate
283+
284+
The values of 'animation-composition' have the meaning defined for the
285+
corresponding values of the <a>composite operation</a> defined in Web
286+
Animations [[!WEB-ANIMATIONS]].
287+
288+
When specified in a keyframe, 'animation-composition' defines the operation
289+
used for each property specified in that keyframe until the next keyframe
290+
specifying each property.
291+
292+
<div class='example'>
293+
For example, the following stylesheet defines two different animations
294+
targetting the 'scale' property.
295+
296+
<pre>
297+
@keyframes heartbeat {
298+
from {
299+
scale: 1;
300+
animation-timing-function: ease-out;
301+
}
302+
30% {
303+
scale: 1.3;
304+
}
305+
}
306+
.heartbeat {
307+
animation: heartbeat 0.3s 2s infinite;
308+
}
309+
310+
@keyframes throb {
311+
50% {
312+
scale: 1.8;
313+
}
314+
}
315+
.icon:mouseover {
316+
animation: throb 0.4s add;
317+
}
318+
</pre>
319+
320+
If these two animations are applied to the same element, normally only
321+
one animation would apply, but by specifying ''add'' as the
322+
'animation-composition' on the second animation, the result of the two
323+
animations will be combined.
324+
325+
Since CSS Transitions [[CSS3-TRANSITIONS]] have a lower composite
326+
order, it is possible to use 'animation-composition' to combine CSS
327+
Animations with underlying transitions as in the following example.
328+
329+
<pre>
330+
.icon {
331+
filter: blur(20px);
332+
transition: filter 0.5s;
333+
}
334+
.icon:hover {
335+
filter: blur(0px);
336+
animation: brightness-pulse 3s infinite add;
337+
}
338+
339+
@keyframes pulse {
340+
0% {
341+
scale: 1.1;
342+
filter: brightness(130%);
343+
}
344+
10% {
345+
scale: 1;
346+
filter: brightness(100%);
347+
}
348+
}
349+
</pre>
350+
351+
Issue: Create pictures of these examples and verify they make sense.
352+
</div>
353+
263354
# Animation Events # {#events}
264355
265356
## Types of <code>AnimationEvent</code> ## {#event-animationevent}

‎css-animations-2/Overview.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
137137
<ul class="toc">
138138
<li><a href="#interaction-between-animation-play-state-and-web-animations-API"><span class="secno">3.1.1</span> <span class="content">Interaction between <span class="property">animation-play-state</span> and the Web Animations API</span></a>
139139
</ul>
140+
<li><a href="#animation-composition"><span class="secno">3.2</span> <span class="content">The <span class="property">animation-composition</span> property</span></a>
140141
</ul>
141142
<li>
142143
<a href="#events"><span class="secno">4</span> <span class="content">Animation Events</span></a>
@@ -169,7 +170,9 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
169170
<a href="#references"><span class="secno"></span> <span class="content">References</span></a>
170171
<ul class="toc">
171172
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
173+
<li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
172174
</ul>
175+
<li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
173176
<li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
174177
<li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
175178
</ul>
@@ -329,6 +332,101 @@ <h4 class="heading settled" data-level="3.1.1" id="interaction-between-animation
329332
running states, the user agent must run the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#play-an-animation">play an animation</a> procedure
330333
on the animation. If the change is due to a change in the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> (i.e. the transition E → A) the <var>auto-rewind</var> flag for that procedure must be set to false; otherwise
331334
it must be set to true.</p>
335+
<h3 class="heading settled" data-level="3.2" id="animation-composition"><span class="secno">3.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> property</span><a class="self-link" href="#animation-composition"></a></h3>
336+
<p>The <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> property defines the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#composite-operation">composite operation</a> used when multiple animations affect the same property simultaneously.</p>
337+
<table class="definition propdef" data-link-for-hint="animation-composition">
338+
<tbody>
339+
<tr>
340+
<th>Name:
341+
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-animation-composition">animation-composition<a class="self-link" href="#propdef-animation-composition"></a></dfn>
342+
<tr class="value">
343+
<th>Value:
344+
<td class="prod"><a class="production css" data-link-type="type" href="#typedef-single-animation-composition">&lt;single-animation-composition></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-comma">#</a>
345+
<tr>
346+
<th>Initial:
347+
<td>replace
348+
<tr>
349+
<th>Applies to:
350+
<td>all elements, ::before and ::after pseudo-elements
351+
<tr>
352+
<th>Inherited:
353+
<td>none
354+
<tr>
355+
<th>Percentages:
356+
<td>N/A
357+
<tr>
358+
<th>Media:
359+
<td>interactive
360+
<tr>
361+
<th>Computed value:
362+
<td>As specified
363+
<tr>
364+
<th>Animatable:
365+
<td>no
366+
<tr>
367+
<th>Canonical order:
368+
<td>per grammar
369+
</table>
370+
<p><dfn class="css" data-dfn-type="type" data-export="" id="typedef-single-animation-composition">&lt;single-animation-composition><a class="self-link" href="#typedef-single-animation-composition"></a></dfn> = replace | add | accumulate</p>
371+
<p>The values of <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> have the meaning defined for the
372+
corresponding values of the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#composite-operation">composite operation</a> defined in Web
373+
Animations <a data-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a>.</p>
374+
<p>When specified in a keyframe, <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> defines the operation
375+
used for each property specified in that keyframe until the next keyframe
376+
specifying each property.</p>
377+
<div class="example" id="example-e146d515">
378+
<a class="self-link" href="#example-e146d515"></a> For example, the following stylesheet defines two different animations
379+
targetting the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">scale</a> property.
380+
<pre>@keyframes heartbeat {
381+
from {
382+
scale: 1;
383+
animation-timing-function: ease-out;
384+
}
385+
30% {
386+
scale: 1.3;
387+
}
388+
}
389+
.heartbeat {
390+
animation: heartbeat 0.3s 2s infinite;
391+
}
392+
393+
@keyframes throb {
394+
50% {
395+
scale: 1.8;
396+
}
397+
}
398+
.icon:mouseover {
399+
animation: throb 0.4s add;
400+
}
401+
</pre>
402+
<p>If these two animations are applied to the same element, normally only
403+
one animation would apply, but by specifying <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/css-masking-1/#valuedef-add">add</a> as the <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> on the second animation, the result of the two
404+
animations will be combined.</p>
405+
<p>Since CSS Transitions <a data-link-type="biblio" href="#biblio-css3-transitions">[CSS3-TRANSITIONS]</a> have a lower composite
406+
order, it is possible to use <a class="property" data-link-type="propdesc" href="#propdef-animation-composition">animation-composition</a> to combine CSS
407+
Animations with underlying transitions as in the following example.</p>
408+
<pre>.icon {
409+
filter: blur(20px);
410+
transition: filter 0.5s;
411+
}
412+
.icon:hover {
413+
filter: blur(0px);
414+
animation: brightness-pulse 3s infinite add;
415+
}
416+
417+
@keyframes pulse {
418+
0% {
419+
scale: 1.1;
420+
filter: brightness(130%);
421+
}
422+
10% {
423+
scale: 1;
424+
filter: brightness(100%);
425+
}
426+
}
427+
</pre>
428+
<p class="issue" id="issue-69776a9f"><a class="self-link" href="#issue-69776a9f"></a> Create pictures of these examples and verify they make sense.</p>
429+
</div>
332430
<h2 class="heading settled" data-level="4" id="events"><span class="secno">4. </span><span class="content">Animation Events</span><a class="self-link" href="#events"></a></h2>
333431
<h3 class="heading settled" data-level="4.1" id="event-animationevent"><span class="secno">4.1. </span><span class="content">Types of <code>AnimationEvent</code></span><a class="self-link" href="#event-animationevent"></a></h3>
334432
<p>The <em>additional</em> types of animation events that can occur are:</p>
@@ -543,6 +641,7 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
543641
<ul class="indexlist">
544642
<li><a href="#active">active</a><span>, in §4.2</span>
545643
<li><a href="#dom-animationevent-animationcancel">animationcancel</a><span>, in §4.1</span>
644+
<li><a href="#propdef-animation-composition">animation-composition</a><span>, in §3.2</span>
546645
<li>
547646
animationName
548647
<ul>
@@ -571,6 +670,7 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
571670
<li><a href="#left-active">left-active</a><span>, in §4.2</span>
572671
<li><a href="#owning-element">owning element</a><span>, in §2.1</span>
573672
<li><a href="#right-active">right-active</a><span>, in §4.2</span>
673+
<li><a href="#typedef-single-animation-composition">&lt;single-animation-composition></a><span>, in §3.2</span>
574674
</ul>
575675
<h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
576676
<ul class="indexlist">
@@ -591,6 +691,21 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
591691
<ul>
592692
<li><a href="https://drafts.csswg.org/css-cascade-4/#computed-value">computed value</a>
593693
</ul>
694+
<li>
695+
<a data-link-type="biblio" href="#biblio-css-masking-1">[css-masking-1]</a> defines the following terms:
696+
<ul>
697+
<li><a href="https://drafts.fxtf.org/css-masking-1/#valuedef-add">add</a>
698+
</ul>
699+
<li>
700+
<a data-link-type="biblio" href="#biblio-css-transforms-2">[css-transforms-2]</a> defines the following terms:
701+
<ul>
702+
<li><a href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">scale</a>
703+
</ul>
704+
<li>
705+
<a data-link-type="biblio" href="#biblio-css-values-3">[css-values]</a> defines the following terms:
706+
<ul>
707+
<li><a href="https://drafts.csswg.org/css-values-3/#mult-comma">#</a>
708+
</ul>
594709
<li>
595710
<a data-link-type="biblio" href="#biblio-dom-ls">[dom-ls]</a> defines the following terms:
596711
<ul>
@@ -605,6 +720,7 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
605720
<li><a href="https://w3c.github.io/web-animations/#animation">animation</a>
606721
<li><a href="https://w3c.github.io/web-animations/#animation-playback-rate">animation playback rate</a>
607722
<li><a href="https://w3c.github.io/web-animations/#animation-type">animation type</a>
723+
<li><a href="https://w3c.github.io/web-animations/#composite-operation">composite operation</a>
608724
<li><a href="https://w3c.github.io/web-animations/#current-iteration">current iteration</a>
609725
<li><a href="https://w3c.github.io/web-animations/#current-time">current time</a>
610726
<li><a href="https://w3c.github.io/web-animations/#getframes">getFrames()</a>
@@ -635,6 +751,12 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
635751
<dd>CSS Animations Module Level 1 URL: <a href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a>
636752
<dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4]
637753
<dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 8 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a>
754+
<dt id="biblio-css-masking-1"><a class="self-link" href="#biblio-css-masking-1"></a>[CSS-MASKING-1]
755+
<dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-masking-1/">CSS Masking Module Level 1</a>. 26 August 2014. CR. URL: <a href="http://www.w3.org/TR/css-masking-1/">http://www.w3.org/TR/css-masking-1/</a>
756+
<dt id="biblio-css-transforms-2"><a class="self-link" href="#biblio-css-transforms-2"></a>[CSS-TRANSFORMS-2]
757+
<dd>CSS Transforms Module Level 2 URL: <a href="https://drafts.csswg.org/css-transforms-2/">https://drafts.csswg.org/css-transforms-2/</a>
758+
<dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
759+
<dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://www.w3.org/TR/css-values/">http://www.w3.org/TR/css-values/</a>
638760
<dt id="biblio-css3-animations"><a class="self-link" href="#biblio-css3-animations"></a>[CSS3-ANIMATIONS]
639761
<dd>Dean Jackson; et al. <a href="http://www.w3.org/TR/css3-animations/">CSS Animations</a>. 19 February 2013. WD. URL: <a href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a>
640762
<dt id="biblio-dom-ls"><a class="self-link" href="#biblio-dom-ls"></a>[DOM-LS]
@@ -644,6 +766,38 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
644766
<dt id="biblio-web-animations"><a class="self-link" href="#biblio-web-animations"></a>[WEB-ANIMATIONS]
645767
<dd>Brian Birtles; et al. <a href="http://www.w3.org/TR/web-animations-1/">Web Animations</a>. 7 July 2015. WD. URL: <a href="http://www.w3.org/TR/web-animations-1/">http://www.w3.org/TR/web-animations-1/</a>
646768
</dl>
769+
<h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
770+
<dl>
771+
<dt id="biblio-css3-transitions"><a class="self-link" href="#biblio-css3-transitions"></a>[CSS3-TRANSITIONS]
772+
<dd>Dean Jackson; et al. <a href="http://www.w3.org/TR/css3-transitions/">CSS Transitions</a>. 19 November 2013. WD. URL: <a href="http://www.w3.org/TR/css3-transitions/">http://www.w3.org/TR/css3-transitions/</a>
773+
</dl>
774+
<h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
775+
<table class="proptable data">
776+
<thead>
777+
<tr>
778+
<th scope="col">Name
779+
<th scope="col">Value
780+
<th scope="col">Initial
781+
<th scope="col">Applies to
782+
<th scope="col">Inh.
783+
<th scope="col">%ages
784+
<th scope="col">Media
785+
<th scope="col">Animatable
786+
<th scope="col">Canonical order
787+
<th scope="col">Computed value
788+
<tbody>
789+
<tr>
790+
<th scope="row"><a class="css" data-link-type="property" href="#propdef-animation-composition">animation-composition</a>
791+
<td>&lt;single-animation-composition>#
792+
<td>replace
793+
<td>all elements, ::before and ::after pseudo-elements
794+
<td>none
795+
<td>N/A
796+
<td>interactive
797+
<td>no
798+
<td>per grammar
799+
<td>As specified
800+
</table>
647801
<h2 class="no-num heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
648802
<pre class="idl">interface <a href="#cssanimation">CSSAnimation</a> : <a data-link-type="idl-name" href="https://w3c.github.io/web-animations/#animation">Animation</a> {
649803
readonly attribute DOMString <a class="idl-code" data-link-type="attribute" data-readonly="" data-type="DOMString " href="#dom-cssanimation-animationname">animationName</a>;
@@ -661,6 +815,7 @@ <h2 class="no-num heading settled" id="idl-index"><span class="content">IDL Inde
661815
</pre>
662816
<h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
663817
<div style="counter-reset:issue">
818+
<div class="issue"> Create pictures of these examples and verify they make sense.<a href="#issue-69776a9f"> ↵ </a></div>
664819
<div class="issue"> Define the value of <code>elapsedTime</code> for each case.<a href="#issue-7ee97385"> ↵ </a></div>
665820
<div class="issue">
666821
<p>We need to define a constructor for <a data-link-type="idl" href="#cssanimation">CSSAnimation</a>.

0 commit comments

Comments
 (0)