Skip to content

Commit 755081f

Browse files
dirkschulzedirkschulze
committed
[css-transforms-1] Remove support for animation with SMIL's <animate> or <set> elements
1 parent b90ae6c commit 755081f

File tree

1 file changed

+2
-92
lines changed

1 file changed

+2
-92
lines changed

‎css-transforms-1/Overview.bs

+2-92
Original file line numberDiff line numberDiff line change
@@ -884,98 +884,7 @@ The SVG specification defines the "<a href="https://www.w3.org/TR/2011/REC-SVG11
884884

885885
{{baseVal}} gives the author the possibility to access and modify the values of the SVG <a element-attr for>transform</a>, <{pattern/patternTransform}>, <{linearGradient/gradientTransform}> attributes. To provide the necessary backwards compatibility to the SVG DOM, {{baseVal}} must reflect the values of this author style sheet. All modifications to SVG DOM objects of {{baseVal}} must affect this author style sheet immediately.
886886

887-
{{animVal}} represents the computed style of the 'transform' property. Therefore it includes all applied <a href="https://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a href="https://www.w3.org/TR/css3-animations/">CSS3 Animations</a> or <a href="#svg-animation">SVG Animations</a> if any of those are underway. The computed style and SVG DOM objects of {{animVal}} can not be modified.
888-
889-
SVG Animation {#svg-animation}
890-
=============
891-
892-
The <{animate}> and <{set}> element {#svg-animate-element}
893-
-----------------------------------
894-
895-
With this specification, the <{animate}> element and the <{set}> element can animate the data type <<transform-list>>.
896-
897-
The animation effect is <a>post-multiplied</a> to the underlying value for additive <{animate}> animations (see below) instead of added to the underlying value, due to the specific behavior of <<transform-list>> animations.
898-
899-
<var ignore=''>From-to</var>, <var ignore=''>from-by</var> and <var ignore=''>by</var> animations are defined in SMIL to be equivalent to a corresponding <var ignore>values</var> animation. However, <var ignore=''>to</var> animations are a mixture of additive and non-additive behavior [[SMIL3]].
900-
901-
<var ignore=''>To</var> animations on <{animate}> provide specific functionality to get a smooth change from the underlying value to the <var ignore=''>to</var> attribute value, which conflicts mathematically with the requirement for additive transform animations to be <a>post-multiplied</a>. As a consequence, the behavior of <var ignore=''>to</var> animations for <{animate}> is undefined. Authors are suggested to use <var ignore=''>from-to</var>, <var ignore=''>from-by</var>, <var ignore=''>by</var> or <var ignore=''>values</var> animations to achieve any desired transform animation.
902-
903-
The value "paced" is undefined for the attribute <{animate/calcMode}> on <{animate}> for animations of the data type <<transform-list>>. If specified, UAs may choose the value "linear" instead. Future versions of this specification may define how paced animations can be performed on <<transform-list>>.
904-
905-
Note: The following paragraphs extend <a href="https://www.w3.org/TR/SVG11/animate.html#complexDistances">Elements, attributes and properties that can be animated</a> [[SVG11]].
906-
907-
The introduced presentation attributes <a element-attr for>transform</a>, <{pattern/patternTransform}>, <{linearGradient/gradientTransform}> and 'transform-origin' are animatable.
908-
909-
With this specification the SVG basic data type <<transform-list>> is equivalent to a list of <<transform-function>>s. <<transform-list>> is animatable and additive. The data type can be animated using the SVG <{animate}> element and the SVG <{set}> element. SVG animations must run the same animation steps as described in section <a href="#interpolation-of-transforms">Transitions and Animations between Transform Values</a>.
910-
911-
<table class="data">
912-
<caption>Animatable data types</caption>
913-
<thead>
914-
<tr>
915-
<th>Data type
916-
<th>Additive?
917-
<th><{animate}>
918-
<th><{set}>
919-
<th><{animateColor}>
920-
<th><{animateTransform}>
921-
<th>Notes
922-
923-
</thead>
924-
<tbody>
925-
<tr>
926-
<th><<transform-list>>
927-
<td>yes
928-
<td>yes
929-
<td>yes
930-
<td>no
931-
<td>yes
932-
<td>Additive for <{animateTransform}> means that a transformation is <a>post-multiplied</a> to the base set of transformations.
933-
</tbody>
934-
</table>
935-
936-
Neutral element for addition {#neutral-element}
937-
----------------------------
938-
939-
Some animations require a neutral element for addition. For transform functions this is a scalar or a list of scalars of 0. Examples of neutral elements for transform functions are ''translate(0)'', ''scale(0)'', ''rotate(0)'', ''skewX(0)'', ''skewY(0)''.
940-
941-
Note: This paragraph focuses on the requirements of [[SMIL]] and the extension defined by [[SVG11]]. This specification does not provide definitions of neutral elements for the other transform functions than the functions listed above.
942-
943-
<div class="example">
944-
945-
A <var>by</var> animation with a by value v<sub>b</sub> is equivalent to the same animation with a values list with 2 values, the neutral element for addition for the domain of the target attribute (denoted 0) and v<sub>b</sub>, and ''additive&#61;"sum"''. [[SMIL3]]
946-
947-
<pre><code highlight=xml>
948-
&lt;rect width="100" height="100">
949-
&lt;animateTransform attributeName="transform" attributeType="XML"
950-
type="scale" by="1" dur="5s" fill="freeze"/>
951-
&lt;/rect>
952-
</code></pre>
953-
954-
The neutral element for addition when performing a <var>by</var> animation with ''type&#61;"scale"'' is the value 0. Thus, performing the animation of the example above causes the rectangle to be invisible at time 0s (since the animated transform list value is ''scale(0)''), and be scaled back to its original size at time 5s (since the animated transform list value is ''scale(1)'').
955-
956-
</div>
957-
958-
The SVG 1.1 '<a href="https://www.w3.org/TR/SVG11/animate.html#TargetAttributes">attributeName</a>' attribute {#svg-attribute-name}
959-
-------------------------------------------------------------------------------------------------------
960-
961-
<a href="https://www.w3.org/TR/SVG11/animate.html">SVG 1.1 Animation</a> defines the "<a href="https://www.w3.org/TR/SVG11/animate.html#TargetAttributes">attributeName</a>" attribute to specify the name of the target attribute. For the presentation attributes <{linearGradient/gradientTransform}> and <{pattern/patternTransform}> it will also be possible to use the value 'transform'. The same 'transform' property will get animated.
962-
963-
<div class="example">
964-
965-
In this example the gradient transformation of the linear gradient gets animated.
966-
967-
<pre><code highlight=xml>
968-
&lt;linearGradient gradientTransform="scale(2)">
969-
&lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
970-
dur="3s" additive="sum"/>
971-
&lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
972-
dur="3s" additive="sum"/>
973-
&lt;/linearGradient>
974-
</code></pre>
975-
976-
The <{linearGradient}> element specifies the <{linearGradient/gradientTransform}> presentation attribute. The two <{animate}> elements address the target attribute <{linearGradient/gradientTransform}> and 'transform'. Even so all animations apply to the same gradient transformation by taking the value of the <{linearGradient/gradientTransform}> presentation attribute, applying the scaling of the first animation and applying the translation of the second animation one after the other.
977-
978-
</div>
887+
{{animVal}} represents the computed style of the 'transform' property. Therefore it includes all applied <a href="https://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a href="https://www.w3.org/TR/css3-animations/">CSS3 Animations</a> or SVG Animations if any of those are underway. The computed style and SVG DOM objects of {{animVal}} can not be modified.
979888

980889
The Transform Functions {#transform-functions}
981890
==============================================
@@ -1530,6 +1439,7 @@ At this point there are no information about potential privacy or security conce
15301439

15311440
* Relax syntax of <a element-attr for>transform</a> attribute: Do not require commas between <<transform-list>> items.
15321441
* Simplified grammar of transform functions. (No normative impact.)
1442+
* Remove animation support of 'transform' from <a element>animate</a> and <a element>set</a> elements.
15331443
* Editorial changes.
15341444

15351445
<h3 class="no-num" id="WD20181130">Since the <a href="https://www.w3.org/TR/2018/WD-css-transforms-1-20181130/">30 November 2018 Working Draft</a></h3>

0 commit comments

Comments
 (0)