Skip to content

Commit 05b336a

Browse files
ydanivtabatkins
ydaniv
and
tabatkins
authored
[css-animations-2] Specify the animation-trigger property (#10128)
* [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>
1 parent a749af6 commit 05b336a

File tree

2 files changed

+678
-1
lines changed

2 files changed

+678
-1
lines changed

‎css-animations-2/Overview.bs‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@ spec:web-animations-1; type:dfn;
6868
text:start delay
6969
text:target element
7070
text:unresolved
71+
spec:web-animations-2; type:dfn;
72+
text:active interval; for:animation trigger
73+
text:default range
74+
text:exit range
75+
spec:scroll-animations-1; type:dfn;
76+
text:animation-range-start
77+
text:animation-range-end
7178
</pre>
7279

7380
<h2 id="delta">Delta specification</h2>
@@ -702,7 +709,279 @@ The 'animation' shorthand property syntax is as follows:
702709
703710
<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>
704711
712+
<h2 id="animation-triggers">
713+
Declaring Animation Triggers</h2>
705714
715+
Animation Triggers are defined using the 'animation-trigger-*' properties.
716+
These list-valued properties,
717+
which are all [=longhands=] of the 'animation-trigger' [=shorthand=],
718+
form a [=coordinating list property group=]
719+
with 'animation-name' as the [=coordinating list base property=]
720+
and each item in the [=coordinated value list=]
721+
defining the properties of a single animation trigger.
722+
723+
## The 'animation-trigger-type' property ## {#animation-trigger-type}
724+
725+
The 'animation-trigger-type' property specifies the [=animation trigger type=]
726+
of the [=animation trigger=].
727+
728+
<pre class='propdef'>
729+
Name: animation-trigger-type
730+
Value: <<single-animation-trigger-type>>#
731+
Initial: once
732+
Applies to: all elements
733+
Inherited: no
734+
Percentages: N/A
735+
Computed value: list, each item a keyword as specified
736+
Animation type: not animatable
737+
Canonical order: per grammar
738+
</pre>
739+
740+
<span class=prod><dfn>&lt;single-animation-trigger-type></dfn> = once | repeat | alternate | state</span>
741+
742+
The values of 'animation-trigger-type' have the following meaning
743+
for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
744+
745+
<dl dfn-type=value dfn-for=animation-trigger-type>
746+
<dt><dfn>once</dfn>
747+
<dd>
748+
The animation is triggered and played once and only once.
749+
750+
<dt><dfn>repeat</dfn>
751+
<dd>
752+
The animation is played from the beginning each time it is triggered.
753+
When the trigger’s [=animation trigger/active interval=] is exited the animation is reset.
754+
755+
<dt><dfn>alternate</dfn>
756+
<dd>
757+
The animation is played forwards, according to its [=playback direction=], each time it is triggered.
758+
When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed.
759+
760+
<dt><dfn>state</dfn>
761+
<dd>
762+
The animation is triggered and played once.
763+
When the trigger’s [=animation trigger/active interval=] is exited the animation is paused.
764+
When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
765+
</dl>
766+
767+
The behavior of each value is defined in [[web-animations-2#trigger-types]].
768+
769+
## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
770+
771+
The 'animation-trigger-timeline' property specifies the <a>timeline</a>
772+
of the animation’s associated [=animation trigger=].
773+
774+
<pre class='propdef'>
775+
Name: animation-trigger-timeline
776+
Value: <<single-animation-timeline>>#
777+
Initial: auto
778+
Applies to: all elements
779+
Inherited: no
780+
Percentages: N/A
781+
Computed value: list, each item either
782+
the keyword ''single-animation-timeline/none'',
783+
the keyword ''single-animation-timeline/auto'',
784+
a case-sensitive [=css identifier=],
785+
a computed ''scroll()'' function,
786+
or
787+
a computed ''view()'' function
788+
Canonical order: per grammar
789+
Animation Type: not animatable
790+
</pre>
791+
792+
The values of 'animation-trigger-timeline' have the same meaning as those of 'animation-timeline'.
793+
794+
Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
795+
796+
## The 'animation-trigger-range' property ## {#animation-trigger-range}
797+
798+
<pre class="propdef shorthand">
799+
Name: animation-trigger-range
800+
Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
801+
</pre>
802+
803+
The 'animation-trigger-range' property is a [=shorthand property|shorthand=]
804+
that sets 'animation-trigger-range-start' and 'animation-trigger-range-end'
805+
together in a single declaration,
806+
specifying the [=animation trigger=]’s associated [=default range=].
807+
It has the same syntax as the 'animation-range' property.
808+
809+
The behavior of 'animation-trigger-range' is defined in [[web-animations-2#trigger-ranges]].
810+
811+
## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
812+
813+
<pre class="propdef">
814+
Name: animation-trigger-range-start
815+
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
816+
Initial: normal
817+
Applies to: all elements
818+
Inherited: no
819+
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
820+
Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
821+
Animation type: not animatable
822+
</pre>
823+
824+
The 'animation-trigger-range-start' property specifies the start of the [=animation trigger=]’s
825+
associated [=default range=].
826+
827+
The values of 'animation-trigger-range-start' have the same meaning as those of 'animation-range-start'.
828+
829+
## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end}
830+
831+
<pre class="propdef">
832+
Name: animation-trigger-range-end
833+
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
834+
Initial: normal
835+
Applies to: all elements
836+
Inherited: no
837+
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
838+
Computed value: list, each item either the keyword ''animation-trigger-range-end/normal'' or a timeline range and progress percentage
839+
Animation type: not animatable
840+
</pre>
841+
842+
The 'animation-trigger-range-end' property specifies the end of the [=animation trigger=]’s
843+
associated [=default range=].
844+
845+
The values of 'animation-trigger-range-end' have the same meaning as those of 'animation-range-end'.
846+
847+
## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
848+
849+
<pre class="propdef shorthand">
850+
Name: animation-trigger-exit-range
851+
Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
852+
</pre>
853+
854+
The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand=]
855+
that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end'
856+
together in a single declaration,
857+
specifying the [=animation trigger=]’s associated [=exit range=].
858+
It has the same syntax as the 'animation-range' property, with the addition of the ''auto'' keyword.
859+
860+
The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s
861+
[=animation trigger/active interval|active interval=] is entered,
862+
and redefines the extent of the [=animation trigger=]’s [=animation trigger/active interval|active interval=].
863+
It is used to extend the [=default range=], for example,
864+
in cases where exiting the [=animation trigger/active interval|active interval=]
865+
may create a visual jump that needs to be avoided.
866+
867+
The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]].
868+
869+
## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
870+
871+
<pre class="propdef">
872+
Name: animation-trigger-exit-range-start
873+
Value: [ auto | normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
874+
Initial: auto
875+
Applies to: all elements
876+
Inherited: no
877+
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
878+
Computed value: list, each item either the keyword ''animation-trigger-exit-range-start/normal'' or a timeline range and progress percentage
879+
Animation type: not animatable
880+
</pre>
881+
882+
The 'animation-trigger-exit-range-start' property specifies the start of the [=animation trigger=]’s
883+
associated [=exit range=].
884+
885+
The values of 'animation-trigger-exit-range-start' have the following meaning:
886+
887+
<dl dfn-for="animation-trigger-exit-range-start" dfn-type=value>
888+
<dt><dfn>auto</dfn>
889+
<dd>
890+
The start of the trigger’s [=exit range=]
891+
is equal to the start of its [=default range=].
892+
893+
<dt><dfn>normal</dfn>
894+
<dd>
895+
The start of the trigger’s [=exit range=]
896+
is the start of its associated [=timeline=];
897+
the start of the trigger’s [=animation trigger/active interval|active interval=]
898+
is determined as normal.
899+
900+
<dt><dfn><<length-percentage>></dfn>
901+
<dd>
902+
The [=exit range=] starts
903+
at the specified point on the [=timeline=]
904+
measuring from the start of the timeline.
905+
906+
<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
907+
<dd>
908+
The [=exit range=] starts
909+
at the specified point on the [=timeline=]
910+
measuring from the start of the specified [=named timeline range=].
911+
If the <<length-percentage>> is omitted,
912+
it defaults to 0%.
913+
</dl>
914+
915+
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
916+
917+
<pre class="propdef">
918+
Name: animation-trigger-exit-range-end
919+
Value: [ auto | normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]#
920+
Initial: auto
921+
Applies to: all elements
922+
Inherited: no
923+
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
924+
Computed value: list, each item either the keyword ''animation-trigger-exit-range-end/normal'' or a timeline range and progress percentage
925+
Animation type: not animatable
926+
</pre>
927+
928+
The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
929+
associated [=exit range=].
930+
931+
The values of 'animation-trigger-exit-range-start' have the following meaning:
932+
933+
<dl dfn-for="animation-trigger-exit-range-end" dfn-type=value>
934+
<dt><dfn>auto</dfn>
935+
<dd>
936+
The end of the trigger’s [=exit range=]
937+
is equal to the end of its [=default range=].
938+
939+
<dt><dfn>normal</dfn>
940+
<dd>
941+
The end of the trigger’s [=exit range=]
942+
is the end of its associated [=timeline=];
943+
the end of the trigger’s [=animation trigger/active interval|active interval=]
944+
is determined as normal.
945+
946+
<dt><dfn><<length-percentage>></dfn>
947+
<dd>
948+
The [=exit range=] ends
949+
at the specified point on the [=timeline=]
950+
measuring from the start of the timeline.
951+
952+
<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
953+
<dd>
954+
The [=exit range=] ends
955+
at the specified point on the [=timeline=]
956+
measuring from the start of the specified [=named timeline range=].
957+
If the <<length-percentage>> is omitted,
958+
it defaults to 100%.
959+
</dl>
960+
961+
## The 'animation-trigger' property ## {#animation-trigger}
962+
963+
The 'animation-trigger' property is a [=shorthand property|shorthand=]
964+
that sets 'animation-trigger-type', 'animation-trigger-timeline',
965+
'animation-trigger-range-start', 'animation-trigger-range-end',
966+
'animation-trigger-exit-range-start', and 'animation-trigger-exit-range-end'
967+
together in a single declaration,
968+
specifying the [=animation trigger=] for an animation.
969+
970+
<pre class='propdef'>
971+
Name: animation-trigger
972+
Value: <<single-animation-trigger>>#
973+
Initial: see individual properties
974+
Applies to: all elements
975+
Inherited: no
976+
Percentages: N/A
977+
Computed value: see individual properties
978+
Canonical order: per grammar
979+
Animation Type: not animatable
980+
</pre>
981+
982+
<pre class=prod>
983+
<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} ] ]
984+
</pre>
706985
707986
# Animation Events # {#events}
708987

0 commit comments

Comments
 (0)