Skip to content

Commit

Permalink
[css-animations-2] Specify the animation-trigger property (#10128)
Browse files Browse the repository at this point in the history 
* [css-animations-2] Specify the animation-trigger property

* Fixed syntax of single-animation-trigger + some link fixes

* More fixes to links and defs

* More fixes to links and defs

* Move all definitions to web-animations-1;
Removed dfn of animation trigger effect

* Fixed idle state definition for animation trigger state

* Moved all new definitions from web-animations-1 to web-animations-2

* Added a description to each property of animation-trigger;
Moved the delta of animation-frame-loop from web-animations-1 to web-animations-2

* Fixed some syntax errors

* Added an issue about timeline becoming idle and did-trigger resetting to false

* Define animation trigger active interval

* Rewrite again according to review

* Added the AnimationTrigger interface;
Added setting timeline of animation trigger algo;
Fixed updating animation trigger state algo

* Update css-animations-2/Overview.bs

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

* Update css-animations-2/Overview.bs

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

* Update css-animations-2/Overview.bs

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

* Removed reset of did trigger to false;
Added trigger to Animation interface and KeyframeAnimationOptions;
Fixed types for ranges

* Added missing attribute definition for animation trigger

* Fixed the procedure of updating trigger state to be initially idle and not go back to idle

* Add note to Animation Frames about running the updating animation trigger state procedure

* Added algorythm for Setting a Trigger of an Animation;
Added AnimationTrigger to Animation, Animatable mixin, and KeyframeAnimationOptions interfaces

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
  • Loading branch information
@ydaniv @tabatkins
ydaniv and tabatkins authored Jan 31, 2025
1 parent a749af6 commit 05b336a
Show file tree
Hide file tree
Showing 2 changed files with 678 additions and 1 deletion.
279 changes: 279 additions & 0 deletions css-animations-2/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,13 @@ spec:web-animations-1; type:dfn;
text:start delay
text:target element
text:unresolved
spec:web-animations-2; type:dfn;
text:active interval; for:animation trigger
text:default range
text:exit range
spec:scroll-animations-1; type:dfn;
text:animation-range-start
text:animation-range-end
</pre>

<h2 id="delta">Delta specification</h2>
Expand Down Expand Up @@ -702,7 +709,279 @@ The 'animation' shorthand property syntax is as follows:
<span class=prod><dfn>&lt;single-animation></dfn> = <<'animation-duration'>> || <<easing-function>> || <<'animation-delay'>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span>
<h2 id="animation-triggers">
Declaring Animation Triggers</h2>
Animation Triggers are defined using the 'animation-trigger-*' properties.
These list-valued properties,
which are all [=longhands=] of the 'animation-trigger' [=shorthand=],
form a [=coordinating list property group=]
with 'animation-name' as the [=coordinating list base property=]
and each item in the [=coordinated value list=]
defining the properties of a single animation trigger.
## The 'animation-trigger-type' property ## {#animation-trigger-type}
The 'animation-trigger-type' property specifies the [=animation trigger type=]
of the [=animation trigger=].
<pre class='propdef'>
Name: animation-trigger-type
Value: <<single-animation-trigger-type>>#
Initial: once
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Animation type: not animatable
Canonical order: per grammar
</pre>
<span class=prod><dfn>&lt;single-animation-trigger-type></dfn> = once | repeat | alternate | state</span>
The values of 'animation-trigger-type' have the following meaning
for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
<dl dfn-type=value dfn-for=animation-trigger-type>
<dt><dfn>once</dfn>
<dd>
The animation is triggered and played once and only once.
<dt><dfn>repeat</dfn>
<dd>
The animation is played from the beginning each time it is triggered.
When the trigger’s [=animation trigger/active interval=] is exited the animation is reset.
<dt><dfn>alternate</dfn>
<dd>
The animation is played forwards, according to its [=playback direction=], each time it is triggered.
When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed.
<dt><dfn>state</dfn>
<dd>
The animation is triggered and played once.
When the trigger’s [=animation trigger/active interval=] is exited the animation is paused.
When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
</dl>
The behavior of each value is defined in [[web-animations-2#trigger-types]].
## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
The 'animation-trigger-timeline' property specifies the <a>timeline</a>
of the animation’s associated [=animation trigger=].
<pre class='propdef'>
Name: animation-trigger-timeline
Value: <<single-animation-timeline>>#
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either
the keyword ''single-animation-timeline/none'',
the keyword ''single-animation-timeline/auto'',
a case-sensitive [=css identifier=],
a computed ''scroll()'' function,
or
a computed ''view()'' function
Canonical order: per grammar
Animation Type: not animatable
</pre>
The values of 'animation-trigger-timeline' have the same meaning as those of 'animation-timeline'.
Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
## The 'animation-trigger-range' property ## {#animation-trigger-range}
<pre class="propdef shorthand">
Name: animation-trigger-range
Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
</pre>
The 'animation-trigger-range' property is a [=shorthand property|shorthand=]
that sets 'animation-trigger-range-start' and 'animation-trigger-range-end'
together in a single declaration,
specifying the [=animation trigger=]’s associated [=default range=].
It has the same syntax as the 'animation-range' property.
The behavior of 'animation-trigger-range' is defined in [[web-animations-2#trigger-ranges]].
## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
<pre class="propdef">
Name: animation-trigger-range-start
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
Initial: normal
Applies to: all elements
Inherited: no
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
Animation type: not animatable
</pre>
The 'animation-trigger-range-start' property specifies the start of the [=animation trigger=]’s
associated [=default range=].
The values of 'animation-trigger-range-start' have the same meaning as those of 'animation-range-start'.
## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end}
<pre class="propdef">
Name: animation-trigger-range-end
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
Initial: normal
Applies to: all elements
Inherited: no
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
Computed value: list, each item either the keyword ''animation-trigger-range-end/normal'' or a timeline range and progress percentage
Animation type: not animatable
</pre>
The 'animation-trigger-range-end' property specifies the end of the [=animation trigger=]’s
associated [=default range=].
The values of 'animation-trigger-range-end' have the same meaning as those of 'animation-range-end'.
## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
<pre class="propdef shorthand">
Name: animation-trigger-exit-range
Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
</pre>
The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand=]
that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end'
together in a single declaration,
specifying the [=animation trigger=]’s associated [=exit range=].
It has the same syntax as the 'animation-range' property, with the addition of the ''auto'' keyword.
The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s
[=animation trigger/active interval|active interval=] is entered,
and redefines the extent of the [=animation trigger=]’s [=animation trigger/active interval|active interval=].
It is used to extend the [=default range=], for example,
in cases where exiting the [=animation trigger/active interval|active interval=]
may create a visual jump that needs to be avoided.
The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]].
## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
<pre class="propdef">
Name: animation-trigger-exit-range-start
Value: [ auto | normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
Initial: auto
Applies to: all elements
Inherited: no
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
Computed value: list, each item either the keyword ''animation-trigger-exit-range-start/normal'' or a timeline range and progress percentage
Animation type: not animatable
</pre>
The 'animation-trigger-exit-range-start' property specifies the start of the [=animation trigger=]’s
associated [=exit range=].
The values of 'animation-trigger-exit-range-start' have the following meaning:
<dl dfn-for="animation-trigger-exit-range-start" dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
The start of the trigger’s [=exit range=]
is equal to the start of its [=default range=].
<dt><dfn>normal</dfn>
<dd>
The start of the trigger’s [=exit range=]
is the start of its associated [=timeline=];
the start of the trigger’s [=animation trigger/active interval|active interval=]
is determined as normal.
<dt><dfn><<length-percentage>></dfn>
<dd>
The [=exit range=] starts
at the specified point on the [=timeline=]
measuring from the start of the timeline.
<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
<dd>
The [=exit range=] starts
at the specified point on the [=timeline=]
measuring from the start of the specified [=named timeline range=].
If the <<length-percentage>> is omitted,
it defaults to 0%.
</dl>
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
<pre class="propdef">
Name: animation-trigger-exit-range-end
Value: [ auto | normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
Initial: auto
Applies to: all elements
Inherited: no
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
Computed value: list, each item either the keyword ''animation-trigger-exit-range-end/normal'' or a timeline range and progress percentage
Animation type: not animatable
</pre>
The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
associated [=exit range=].
The values of 'animation-trigger-exit-range-start' have the following meaning:
<dl dfn-for="animation-trigger-exit-range-end" dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
The end of the trigger’s [=exit range=]
is equal to the end of its [=default range=].
<dt><dfn>normal</dfn>
<dd>
The end of the trigger’s [=exit range=]
is the end of its associated [=timeline=];
the end of the trigger’s [=animation trigger/active interval|active interval=]
is determined as normal.
<dt><dfn><<length-percentage>></dfn>
<dd>
The [=exit range=] ends
at the specified point on the [=timeline=]
measuring from the start of the timeline.
<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
<dd>
The [=exit range=] ends
at the specified point on the [=timeline=]
measuring from the start of the specified [=named timeline range=].
If the <<length-percentage>> is omitted,
it defaults to 100%.
</dl>
## The 'animation-trigger' property ## {#animation-trigger}
The 'animation-trigger' property is a [=shorthand property|shorthand=]
that sets 'animation-trigger-type', 'animation-trigger-timeline',
'animation-trigger-range-start', 'animation-trigger-range-end',
'animation-trigger-exit-range-start', and 'animation-trigger-exit-range-end'
together in a single declaration,
specifying the [=animation trigger=] for an animation.
<pre class='propdef'>
Name: animation-trigger
Value: <<single-animation-trigger>>#
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: see individual properties
Canonical order: per grammar
Animation Type: not animatable
</pre>
<pre class=prod>
<dfn>&lt;single-animation-trigger></dfn> = <<single-animation-trigger-type>> || [ none | auto | [ [ <<dashed-ident>> | <<scroll()>> | <<view()>> ] [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]{0,4} ] ]
</pre>
# Animation Events # {#events}
Expand Down
Loading

0 comments on commit 05b336a

Please sign in to comment.