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. * Update css-animations-2/Overview.bs Co-authored-by: Tab Atkins Jr. * Update css-animations-2/Overview.bs Co-authored-by: Tab Atkins Jr. * 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. 
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
7279

7380

Delta specification

@@ -702,7 +709,279 @@ The 'animation' shorthand property syntax is as follows:
702709
703710
<single-animation> = <<'animation-duration'>> || <> || <<'animation-delay'>> || <> || <> || <> || <> || [ none | <> ] || <>
704711
712+

713+
Declaring Animation Triggers
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+
729+
Name: animation-trigger-type
730+
Value: <>#
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+
739+
740+
<single-animation-trigger-type> = once | repeat | alternate | state
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+
746+
	
once
747+
	
748+
		The animation is triggered and played once and only once.
749+
750+
	
repeat
751+
	
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+
	
alternate
756+
	
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+
	
state
761+
	
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+
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 timeline
772+
of the animation’s associated [=animation trigger=].
773+
774+
775+
Name: animation-trigger-timeline
776+
Value: <>#
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+
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+
799+
  Name: animation-trigger-range
800+
  Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
801+
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+
814+
  Name: animation-trigger-range-start
815+
  Value: [ normal | <> | <> <>? ]#
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+
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+
832+
  Name: animation-trigger-range-end
833+
  Value: [ normal | <> | <> <>? ]#
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+
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+
850+
  Name: animation-trigger-exit-range
851+
  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
852+
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+
872+
  Name: animation-trigger-exit-range-start
873+
  Value: [ auto | normal | <> | <> <>? ]#
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+
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+
888+
	
auto
889+
	
890+
		The start of the trigger’s [=exit range=]
891+
		is equal to the start of its [=default range=].
892+
893+
	
normal
894+
	
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+
	
<>
901+
	
902+
		The [=exit range=] starts
903+
		at the specified point on the [=timeline=]
904+
		measuring from the start of the timeline.
905+
906+
	
<> <>?
907+
	
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 <> is omitted,
912+
		it defaults to 0%.
913+
914+
915+
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
916+
917+
918+
  Name: animation-trigger-exit-range-end
919+
  Value: [ auto | normal | <> | <> <>? ]#
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+
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+
934+
	
auto
935+
	
936+
		The end of the trigger’s [=exit range=]
937+
		is equal to the end of its [=default range=].
938+
939+
	
normal
940+
		
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+
		
<>
947+
		
948+
			The [=exit range=] ends
949+
			at the specified point on the [=timeline=]
950+
			measuring from the start of the timeline.
951+
952+
		
<> <>?
953+
		
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 <> is omitted,
958+
			it defaults to 100%.
959+
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+
971+
Name: animation-trigger
972+
Value: <>#
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+
981+
982+
983+
<single-animation-trigger> = <> || [ none | auto | [ [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4} ] ]
984+
706985
707986
# Animation Events # {#events}
708987
0 commit comments
Comments
 (0)