forked from w3c/web-animations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb-animations.html
8315 lines (8231 loc) · 646 KB
/
web-animations.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><script src='../shared/MathJax/MathJax.js?config=MML_SVGorMML,local/local' type='text/javascript'></script>
<title>Web Animations 1.0</title>
<meta charset="utf-8">
<!--
ReSpec.js wishlist:
Add here any issues you find with ReSpec including missing features. It
will help us decide if we should continue using it and work out what we
need to fix.
* Allow making cross-references to specific methods and members.
-->
<link href="respec/respec.css" rel="stylesheet" type="text/css"><link href="web-animations.css" rel="stylesheet" type="text/css"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"></head>
<body style="display: inherit;"><div class="head"><p><a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a></p><h1 class="title" id="title">Web Animations 1.0</h1><h2 id="w3c-editor-s-draft-25-june-2013"><abbr title="World Wide Web Consortium">W3C</abbr> Editor's Draft 25 June 2013</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/FXTF/web-anim/web-animations.html">http://dev.w3.org/FXTF/web-anim/web-animations.html</a></dd><dt>Latest published version:</dt><dd><a href="http://www.w3.org/TR/web-animations/">http://www.w3.org/TR/web-animations/</a></dd><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/FXTF/web-anim/web-animations.html">http://dev.w3.org/FXTF/web-anim/web-animations.html</a></dd><dt>Previous version:</dt><dd>none</dd><dt>Editors:</dt><dd><span>Brian Birtles</span>, <a href="http://mozilla.jp/">Mozilla Japan</a>, <span class="ed_mailto"><a href="mailto:bbirtles@mozilla.com">bbirtles@mozilla.com</a></span> </dd>
<dd><span>Shane Stephens</span>, <a href="http://www.google.com/">Google, Inc</a>, <span class="ed_mailto"><a href="mailto:shans@google.com">shans@google.com</a></span> </dd>
<dd><span>Alex Danilo</span>, <a href="http://www.google.com/">Google, Inc</a>, <span class="ed_mailto"><a href="mailto:adanilo@google.com">adanilo@google.com</a></span> </dd>
<dd><span>Dmitry Baranovskiy</span>, <a href="http://www.adobe.com/">Adobe Systems</a>, <span class="ed_mailto"><a href="mailto:baranovs@adobe.com">baranovs@adobe.com</a></span> </dd>
<dd><span>Tab Atkins</span>, <a href="http://www.google.com/">Google, Inc</a>, <span class="ed_mailto"><a href="mailto:jackalmage@gmail.com">jackalmage@gmail.com</a></span> </dd>
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. <abbr title="World Wide Web Consortium">W3C</abbr> <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
<section id="abstract" class="introductory"><h2>Abstract</h2><p>
This specification defines a model for synchronization and timing of
changes to the presentation of a Web page.
This specification also defines an application programming interface for
interacting with this model and it is expected that further specifications
will define declarative means for exposing these features.
</p></section><section id="sotd" class="introductory"><h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at http://www.w3.org/TR/.</em></p><p>This document was published by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of the <a href="http://www.w3.org/Style/Activity">Style Activity</a>) and <a href="http://www.w3.org/Graphics/SVG/WG">SVG Working Group</a> (part of the <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a>) as an Editor's Draft. If you wish to make comments regarding this document, please send them to <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (<a href="mailto:public-fx-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-fx/">archives</a>). All feedback is welcome.</p><p>Publication as an Editor's Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p><p>This document was produced by groups operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of each group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>.</p></section><section id="toc"><h2 class="introductory">Table of Contents</h2><ul class="toc"><li class="tocline"><a href="#introduction" class="tocxref"><span class="secno">1. </span>Introduction</a><ul class="toc"><li class="tocline"><a href="#use-cases" class="tocxref"><span class="secno">1.1 </span>Use cases</a></li><li class="tocline"><a href="#relationship-to-other-specifications" class="tocxref"><span class="secno">1.2 </span>Relationship to other specifications</a></li><li class="tocline"><a href="#overview-of-this-specification" class="tocxref"><span class="secno">1.3 </span>Overview of this specification</a></li></ul></li><li class="tocline"><a href="#web-animations-model-overview" class="tocxref"><span class="secno">2. </span>Web Animations model overview</a></li><li class="tocline"><a href="#timing-model" class="tocxref"><span class="secno">3. </span>Timing model</a><ul class="toc"><li class="tocline"><a href="#the-timing-model-at-a-glance" class="tocxref"><span class="secno">3.1 </span>The timing model at a glance</a><ul class="toc"><li class="tocline"><a href="#stateless" class="tocxref"><span class="secno">3.1.1 </span>Stateless</a></li><li class="tocline"><a href="#hierarchical" class="tocxref"><span class="secno">3.1.2 </span>Hierarchical</a></li></ul></li><li class="tocline"><a href="#timing-model-concepts" class="tocxref"><span class="secno">3.2 </span>Timing model concepts</a></li><li class="tocline"><a href="#the-global-clock" class="tocxref"><span class="secno">3.3 </span>The global clock</a></li><li class="tocline"><a href="#timelines" class="tocxref"><span class="secno">3.4 </span>Timelines</a><ul class="toc"><li class="tocline"><a href="#the-document-timeline" class="tocxref"><span class="secno">3.4.1 </span>The document timeline</a></li></ul></li><li class="tocline"><a href="#players" class="tocxref"><span class="secno">3.5 </span>Players</a><ul class="toc"><li class="tocline"><a href="#the-current-time-of-a-player" class="tocxref"><span class="secno">3.5.1 </span>The current time of a player</a></li><li class="tocline"><a href="#seeking-and-pausing" class="tocxref"><span class="secno">3.5.2 </span>Seeking and pausing</a><ul class="toc"><li class="tocline"><a href="#introduction-to-seeking" class="tocxref"><span class="secno">3.5.2.1 </span>Introduction to seeking</a></li><li class="tocline"><a href="#introduction-to-pausing" class="tocxref"><span class="secno">3.5.2.2 </span>Introduction to pausing</a></li><li class="tocline"><a href="#seeking-and-pausing-properties" class="tocxref"><span class="secno">3.5.2.3 </span>Seeking and pausing properties</a></li><li class="tocline"><a href="#calculating-the-time-drift" class="tocxref"><span class="secno">3.5.2.4 </span>Calculating the time drift</a></li><li class="tocline"><a href="#updating-the-paused-state" class="tocxref"><span class="secno">3.5.2.5 </span>Updating the <span class="internalDFN formerLink internalDFN">paused state</span></a></li><li class="tocline"><a href="#performing-a-seek" class="tocxref"><span class="secno">3.5.2.6 </span>Performing a seek</a></li></ul></li><li class="tocline"><a href="#speed-control" class="tocxref"><span class="secno">3.5.3 </span>Speed control</a><ul class="toc"><li class="tocline"><a href="#updating-the-playback-rate" class="tocxref"><span class="secno">3.5.3.1 </span>Updating the playback rate</a></li></ul></li></ul></li><li class="tocline"><a href="#timed-items" class="tocxref"><span class="secno">3.6 </span>Timed items</a><ul class="toc"><li class="tocline"><a href="#the-active-interval" class="tocxref"><span class="secno">3.6.1 </span>The active interval</a></li><li class="tocline"><a href="#local-time-and-inherited-time" class="tocxref"><span class="secno">3.6.2 </span>Local time and inherited time</a></li><li class="tocline"><a href="#timed-item-states" class="tocxref"><span class="secno">3.6.3 </span>Timed item states</a></li></ul></li><li class="tocline"><a href="#fill-behavior" class="tocxref"><span class="secno">3.7 </span>Fill behavior</a><ul class="toc"><li class="tocline"><a href="#fill-modes" class="tocxref"><span class="secno">3.7.1 </span>Fill modes</a></li></ul></li><li class="tocline"><a href="#repeating" class="tocxref"><span class="secno">3.8 </span>Repeating</a><ul class="toc"><li class="tocline"><a href="#iteration-intervals" class="tocxref"><span class="secno">3.8.1 </span>Iteration intervals</a></li><li class="tocline"><a href="#controlling-iteration" class="tocxref"><span class="secno">3.8.2 </span>Controlling iteration</a></li><li class="tocline"><a href="#iteration-time-space" class="tocxref"><span class="secno">3.8.3 </span>Iteration time space</a></li><li class="tocline"><a href="#interval-timing" class="tocxref"><span class="secno">3.8.4 </span>Interval timing</a></li></ul></li><li class="tocline"><a href="#timed-item-speed-control" class="tocxref"><span class="secno">3.9 </span>Timed item speed control</a></li><li class="tocline"><a href="#core-timed-item-calculations" class="tocxref"><span class="secno">3.10 </span>Core timed item calculations</a><ul class="toc"><li class="tocline"><a href="#overview" class="tocxref"><span class="secno">3.10.1 </span>Overview</a></li><li class="tocline"><a href="#calculating-the-active-duration" class="tocxref"><span class="secno">3.10.2 </span>Calculating the active duration</a></li><li class="tocline"><a href="#transforming-the-local-time" class="tocxref"><span class="secno">3.10.3 </span>Transforming the local time</a><ul class="toc"><li class="tocline"><a href="#calculating-the-active-time" class="tocxref"><span class="secno">3.10.3.1 </span>Calculating the active time</a></li><li class="tocline"><a href="#calculating-the-scaled-active-time" class="tocxref"><span class="secno">3.10.3.2 </span>Calculating the scaled active time</a></li><li class="tocline"><a href="#calculating-the-iteration-time" class="tocxref"><span class="secno">3.10.3.3 </span>Calculating the iteration time</a></li></ul></li><li class="tocline"><a href="#calculating-the-current-iteration" class="tocxref"><span class="secno">3.10.4 </span>Calculating the current iteration</a></li></ul></li><li class="tocline"><a href="#direction-control" class="tocxref"><span class="secno">3.11 </span>Direction control</a><ul class="toc"><li class="tocline"><a href="#calculating-the-directed-time" class="tocxref"><span class="secno">3.11.1 </span>Calculating the directed time</a></li></ul></li><li class="tocline"><a href="#time-transformations" class="tocxref"><span class="secno">3.12 </span>Time transformations</a><ul class="toc"><li class="tocline"><a href="#scaling-the-time" class="tocxref"><span class="secno">3.12.1 </span>Scaling the time</a></li><li class="tocline"><a href="#timing-functions" class="tocxref"><span class="secno">3.12.2 </span>Timing functions</a></li><li class="tocline"><a href="#scaling-using-a-cubic-b-zier-curve" class="tocxref"><span class="secno">3.12.3 </span>Scaling using a cubic Bézier curve</a></li><li class="tocline"><a href="#timing-in-discrete-steps" class="tocxref"><span class="secno">3.12.4 </span>Timing in discrete steps</a></li><li class="tocline"><a href="#paced-timing" class="tocxref"><span class="secno">3.12.5 </span>Paced timing</a><ul class="toc"><li class="tocline"><a href="#evaluating-a-paced-timing-function" class="tocxref"><span class="secno">3.12.5.1 </span>Evaluating a paced timing function</a></li><li class="tocline"><a href="#calculating-the-length-between-two-property-values" class="tocxref"><span class="secno">3.12.5.2 </span>Calculating the length between two property values</a></li></ul></li><li class="tocline"><a href="#calculating-the-transformed-time" class="tocxref"><span class="secno">3.12.6 </span>Calculating the transformed time</a></li></ul></li><li class="tocline"><a href="#grouping-and-synchronization" class="tocxref"><span class="secno">3.13 </span>Grouping and synchronization</a><ul class="toc"><li class="tocline"><a href="#relationship-of-group-time-to-child-time" class="tocxref"><span class="secno">3.13.1 </span>Relationship of group time to child time</a></li><li class="tocline"><a href="#types-of-timing-groups" class="tocxref"><span class="secno">3.13.2 </span>Types of timing groups</a></li><li class="tocline"><a href="#parallel-timing-groups" class="tocxref"><span class="secno">3.13.3 </span>Parallel timing groups</a><ul class="toc"><li class="tocline"><a href="#the-start-time-of-children-of-a-parallel-timing-group" class="tocxref"><span class="secno">3.13.3.1 </span>The start time of children of a parallel timing group</a></li><li class="tocline"><a href="#the-intrinsic-iteration-duration-of-a-parallel-timing-group" class="tocxref"><span class="secno">3.13.3.2 </span>The intrinsic iteration duration of a parallel timing group</a></li></ul></li><li class="tocline"><a href="#sequence-timing-groups" class="tocxref"><span class="secno">3.13.4 </span>Sequence timing groups</a><ul class="toc"><li class="tocline"><a href="#the-start-time-of-children-of-a-sequence-timing-group" class="tocxref"><span class="secno">3.13.4.1 </span>The start time of children of a sequence timing group</a></li><li class="tocline"><a href="#the-intrinsic-iteration-duration-of-a-sequence-timing-group" class="tocxref"><span class="secno">3.13.4.2 </span>The intrinsic iteration duration of a sequence timing group</a></li></ul></li></ul></li><li class="tocline"><a href="#animations" class="tocxref"><span class="secno">3.14 </span>Animations</a><ul class="toc"><li class="tocline"><a href="#calculating-the-time-fraction" class="tocxref"><span class="secno">3.14.1 </span>Calculating the time fraction</a></li></ul></li></ul></li><li class="tocline"><a href="#animation-model" class="tocxref"><span class="secno">4. </span>Animation model</a><ul class="toc"><li class="tocline"><a href="#animation-effects" class="tocxref"><span class="secno">4.1 </span>Animation effects</a><ul class="toc"><li class="tocline"><a href="#target-properties" class="tocxref"><span class="secno">4.1.1 </span>Target properties</a></li><li class="tocline"><a href="#target-property-types" class="tocxref"><span class="secno">4.1.2 </span>Target property types</a></li><li class="tocline"><a href="#intermediate-animation-values" class="tocxref"><span class="secno">4.1.3 </span>Intermediate animation values</a><ul class="toc"><li class="tocline"><a href="#unaccumulated-animation-values" class="tocxref"><span class="secno">4.1.3.1 </span>Unaccumulated animation values</a></li><li class="tocline"><a href="#accumulating-animation-values" class="tocxref"><span class="secno">4.1.3.2 </span>Accumulating animation values</a></li></ul></li></ul></li><li class="tocline"><a href="#combining-animations" class="tocxref"><span class="secno">4.2 </span>Combining animations</a><ul class="toc"><li class="tocline"><a href="#the-animation-stack" class="tocxref"><span class="secno">4.2.1 </span>The animation stack</a><ul class="toc"><li class="tocline"><a href="#the-custom-animation-priority" class="tocxref"><span class="secno">4.2.1.1 </span>The custom animation priority</a></li></ul></li><li class="tocline"><a href="#calculating-the-result-of-an-animation-stack" class="tocxref"><span class="secno">4.2.2 </span>Calculating the result of an animation stack</a></li><li class="tocline"><a href="#animation-composition" class="tocxref"><span class="secno">4.2.3 </span>Animation composition</a></li><li class="tocline"><a href="#combining-with-other-styles--the-override-stylesheet" class="tocxref"><span class="secno">4.2.4 </span>Combining with other styles: the override stylesheet</a></li></ul></li><li class="tocline"><a href="#keyframe-animation-effects" class="tocxref"><span class="secno">4.3 </span>Keyframe animation effects</a><ul class="toc"><li class="tocline"><a href="#the-unaccumulated-animation-value-of-a-keyframe-animation-effect" class="tocxref"><span class="secno">4.3.1 </span>The unaccumulated animation value of a keyframe animation effect</a></li><li class="tocline"><a href="#procedure-for-evenly-distributing-keyframes" class="tocxref"><span class="secno">4.3.2 </span>Procedure for evenly distributing keyframes</a></li></ul></li><li class="tocline"><a href="#path-animation-effects" class="tocxref"><span class="secno">4.4 </span>Path animation effects</a><ul class="toc"><li class="tocline"><a href="#the-unaccumulated-animation-value-of-a-path-animation-effect" class="tocxref"><span class="secno">4.4.1 </span>The unaccumulated animation value of a path animation effect</a></li><li class="tocline"><a href="#determining-the-current-path-element-and-element-fraction" class="tocxref"><span class="secno">4.4.2 </span>Determining the current path element and element fraction</a></li><li class="tocline"><a href="#calculating-the-rotation-value-of-a-path-animation-effect" class="tocxref"><span class="secno">4.4.3 </span>Calculating the rotation value of a path animation effect</a></li><li class="tocline"><a href="#calculating-the-translation-value-of-a-path-animation-effect" class="tocxref"><span class="secno">4.4.4 </span>Calculating the translation value of a path animation effect</a></li></ul></li><li class="tocline"><a href="#animatable-properties" class="tocxref"><span class="secno">4.5 </span>Animatable properties</a><ul class="toc"><li class="tocline"><a href="#css-properties" class="tocxref"><span class="secno">4.5.1 </span>CSS Properties</a></li><li class="tocline"><a href="#css-properties-defined-by-svg" class="tocxref"><span class="secno">4.5.2 </span>CSS Properties defined by SVG</a></li><li class="tocline"><a href="#svg-attributes" class="tocxref"><span class="secno">4.5.3 </span>SVG Attributes</a></li></ul></li><li class="tocline"><a href="#animation-of-property-types" class="tocxref"><span class="secno">4.6 </span>Animation of property types</a><ul class="toc"><li class="tocline"><a href="#default-animation-algorithms" class="tocxref"><span class="secno">4.6.1 </span>Default Animation Algorithms</a></li><li class="tocline"><a href="#animation-of-like-types" class="tocxref"><span class="secno">4.6.2 </span>Animation of like types</a><ul class="toc"><li class="tocline"><a href="#the--integer----number--and--percentage---------------types" class="tocxref"><span class="secno">4.6.2.1 </span>
The <integer>, <number> and <percentage>
types
</a></li><li class="tocline"><a href="#the--length----angle----time--and---------------frequency--types" class="tocxref"><span class="secno">4.6.2.2 </span>
The <length>, <angle>, <time> and
<frequency> types
</a></li><li class="tocline"><a href="#the--resolution--type" class="tocxref"><span class="secno">4.6.2.3 </span>The <resolution> type</a></li><li class="tocline"><a href="#the--color--type" class="tocxref"><span class="secno">4.6.2.4 </span>The <color> type</a></li><li class="tocline"><a href="#the--image--type" class="tocxref"><span class="secno">4.6.2.5 </span>The <image> type</a></li><li class="tocline"><a href="#the--position--type" class="tocxref"><span class="secno">4.6.2.6 </span>The <position> type</a></li><li class="tocline"><a href="#the--transform-function--type" class="tocxref"><span class="secno">4.6.2.7 </span>The <transform-function> type</a></li></ul></li><li class="tocline"><a href="#animation-of-non-matching-primitive-types" class="tocxref"><span class="secno">4.6.3 </span>Animation of non-matching primitive types</a></li><li class="tocline"><a href="#animation-of-keywords-and-primitive-types" class="tocxref"><span class="secno">4.6.4 </span>Animation of keywords and primitive types</a></li><li class="tocline"><a href="#animation-of-shorthand-properties" class="tocxref"><span class="secno">4.6.5 </span>Animation of shorthand properties</a></li><li class="tocline"><a href="#animation-of-css-calc-expressions" class="tocxref"><span class="secno">4.6.6 </span>Animation of CSS calc expressions</a></li><li class="tocline"><a href="#animation-of-transform-lists" class="tocxref"><span class="secno">4.6.7 </span>Animation of transform lists</a></li></ul></li><li class="tocline"><a href="#custom-effects" class="tocxref"><span class="secno">4.7 </span>Custom effects</a><ul class="toc"><li class="tocline"><a href="#execution-order-of-custom-effects" class="tocxref"><span class="secno">4.7.1 </span>Execution order of custom effects</a></li></ul></li></ul></li><li class="tocline"><a href="#timing-events" class="tocxref"><span class="secno">5. </span>Timing events</a><ul class="toc"><li class="tocline"><a href="#types-of-timing-events" class="tocxref"><span class="secno">5.1 </span>Types of timing events</a></li><li class="tocline"><a href="#uneased-timing" class="tocxref"><span class="secno">5.2 </span>Uneased timing</a></li><li class="tocline"><a href="#inverse-timing-calculations" class="tocxref"><span class="secno">5.3 </span>Inverse timing calculations</a></li><li class="tocline"><a href="#event-parameters" class="tocxref"><span class="secno">5.4 </span>Event parameters</a></li><li class="tocline"><a href="#propagation-path" class="tocxref"><span class="secno">5.5 </span>Propagation path</a></li><li class="tocline"><a href="#sequence-of-events" class="tocxref"><span class="secno">5.6 </span>Sequence of events</a></li><li class="tocline"><a href="#event-dispatch" class="tocxref"><span class="secno">5.7 </span>Event dispatch</a><ul class="toc"><li class="tocline"><a href="#seeked-event-dispatch" class="tocxref"><span class="secno">5.7.1 </span>Seeked event dispatch</a></li><li class="tocline"><a href="#event-dispatch-and-seeking-a-player" class="tocxref"><span class="secno">5.7.2 </span>Event dispatch and seeking a player</a></li><li class="tocline"><a href="#event-dispatch-and-time-adjustments" class="tocxref"><span class="secno">5.7.3 </span>Event dispatch and time adjustments</a></li><li class="tocline"><a href="#event-dispatch-and-unattached-timed-items" class="tocxref"><span class="secno">5.7.4 </span>Event dispatch and unattached timed items</a></li><li class="tocline"><a href="#event-dispatch-and-extended-delays" class="tocxref"><span class="secno">5.7.5 </span>Event dispatch and extended delays</a></li></ul></li></ul></li><li class="tocline"><a href="#script-interface" class="tocxref"><span class="secno">6. </span>Script interface</a><ul class="toc"><li class="tocline"><a href="#the-timeline-interface" class="tocxref"><span class="secno">6.1 </span>The <code>Timeline</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes" class="tocxref"><span class="secno">6.1.1 </span>Attributes</a></li><li class="tocline"><a href="#methods" class="tocxref"><span class="secno">6.1.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-player-interface" class="tocxref"><span class="secno">6.2 </span>The <code>Player</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-1" class="tocxref"><span class="secno">6.2.1 </span>Attributes</a></li></ul></li><li class="tocline"><a href="#the-timeditem-interface" class="tocxref"><span class="secno">6.3 </span>The <code>TimedItem</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-2" class="tocxref"><span class="secno">6.3.1 </span>Attributes</a></li><li class="tocline"><a href="#methods-1" class="tocxref"><span class="secno">6.3.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-timing-interface" class="tocxref"><span class="secno">6.4 </span>The <code>Timing</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-3" class="tocxref"><span class="secno">6.4.1 </span>Attributes</a></li></ul></li><li class="tocline"><a href="#the-timinginput-dictionary" class="tocxref"><span class="secno">6.5 </span>The <code>TimingInput</code> dictionary</a><ul class="toc"><li class="tocline"><a href="#dictionary-timinginput-members" class="tocxref"><span class="secno">6.5.1 </span>Dictionary <span class="idlType formerLink idlType"><code>TimingInput</code></span> Members</a></li><li class="tocline"><a href="#the-fillmode-enumeration" class="tocxref"><span class="secno">6.5.2 </span>The <code>FillMode</code> enumeration</a><ul class="toc"><li class="tocline"><a href="#values" class="tocxref"><span class="secno">6.5.2.1 </span>Values</a></li></ul></li><li class="tocline"><a href="#the-playbackdirection-enumeration" class="tocxref"><span class="secno">6.5.3 </span>The <code>PlaybackDirection</code> enumeration</a><ul class="toc"><li class="tocline"><a href="#values-1" class="tocxref"><span class="secno">6.5.3.1 </span>Values</a></li></ul></li></ul></li><li class="tocline"><a href="#the-timinggroup-interface" class="tocxref"><span class="secno">6.6 </span>The <code>TimingGroup</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-4" class="tocxref"><span class="secno">6.6.1 </span>Attributes</a></li><li class="tocline"><a href="#methods-2" class="tocxref"><span class="secno">6.6.2 </span>Methods</a></li><li class="tocline"><a href="#common-definitions-for-manipulating-hierarchies" class="tocxref"><span class="secno">6.6.3 </span>Common definitions for manipulating hierarchies</a></li></ul></li><li class="tocline"><a href="#the-timeditemlist-interface" class="tocxref"><span class="secno">6.7 </span>The <code>TimedItemList</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-5" class="tocxref"><span class="secno">6.7.1 </span>Attributes</a></li><li class="tocline"><a href="#methods-3" class="tocxref"><span class="secno">6.7.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-pargroup-interface" class="tocxref"><span class="secno">6.8 </span>The <code>ParGroup</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors" class="tocxref"><span class="secno">6.8.1 </span>Constructors</a></li><li class="tocline"><a href="#methods-4" class="tocxref"><span class="secno">6.8.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-seqgroup-interface" class="tocxref"><span class="secno">6.9 </span>The <code>SeqGroup</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors-1" class="tocxref"><span class="secno">6.9.1 </span>Constructors</a></li><li class="tocline"><a href="#methods-5" class="tocxref"><span class="secno">6.9.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-animation-interface" class="tocxref"><span class="secno">6.10 </span>The <code>Animation</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors-2" class="tocxref"><span class="secno">6.10.1 </span>Constructors</a></li><li class="tocline"><a href="#attributes-6" class="tocxref"><span class="secno">6.10.2 </span>Attributes</a></li><li class="tocline"><a href="#methods-6" class="tocxref"><span class="secno">6.10.3 </span>Methods</a></li><li class="tocline"><a href="#creating-a-new-animation-object" class="tocxref"><span class="secno">6.10.4 </span>Creating a new <code>Animation</code> object</a></li></ul></li><li class="tocline"><a href="#the-pseudoelementreference-interface" class="tocxref"><span class="secno">6.11 </span>The <code>PseudoElementReference</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors-3" class="tocxref"><span class="secno">6.11.1 </span>Constructors</a></li><li class="tocline"><a href="#attributes-7" class="tocxref"><span class="secno">6.11.2 </span>Attributes</a></li></ul></li><li class="tocline"><a href="#the-animationtarget-typedef" class="tocxref"><span class="secno">6.12 </span>The <code>AnimationTarget</code> typedef</a></li><li class="tocline"><a href="#the-animationeffect-interface" class="tocxref"><span class="secno">6.13 </span>The <code>AnimationEffect</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-8" class="tocxref"><span class="secno">6.13.1 </span>Attributes</a></li><li class="tocline"><a href="#methods-7" class="tocxref"><span class="secno">6.13.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-accumulateoperation-enumeration" class="tocxref"><span class="secno">6.14 </span>The <code>AccumulateOperation</code> enumeration</a><ul class="toc"><li class="tocline"><a href="#values-2" class="tocxref"><span class="secno">6.14.1 </span>Values</a></li></ul></li><li class="tocline"><a href="#the-compositeoperation-enumeration" class="tocxref"><span class="secno">6.15 </span>The <code>CompositeOperation</code> enumeration</a><ul class="toc"><li class="tocline"><a href="#values-3" class="tocxref"><span class="secno">6.15.1 </span>Values</a></li></ul></li><li class="tocline"><a href="#the-keyframeanimationeffect-interface" class="tocxref"><span class="secno">6.16 </span>The <code>KeyframeAnimationEffect</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors-4" class="tocxref"><span class="secno">6.16.1 </span>Constructors</a></li><li class="tocline"><a href="#attributes-9" class="tocxref"><span class="secno">6.16.2 </span>Attributes</a></li><li class="tocline"><a href="#methods-8" class="tocxref"><span class="secno">6.16.3 </span>Methods</a></li><li class="tocline"><a href="#normalizing-the-list-of-keyframes" class="tocxref"><span class="secno">6.16.4 </span>Normalizing the list of keyframes</a></li></ul></li><li class="tocline"><a href="#the-keyframe-dictionary" class="tocxref"><span class="secno">6.17 </span>The <code>Keyframe</code> dictionary</a><ul class="toc"><li class="tocline"><a href="#dictionary-keyframe-members" class="tocxref"><span class="secno">6.17.1 </span>Dictionary <span class="idlType formerLink idlType"><code>Keyframe</code></span> Members</a></li><li class="tocline"><a href="#normalizing-a-keyframe-object" class="tocxref"><span class="secno">6.17.2 </span>Normalizing a <code>Keyframe</code> object</a></li></ul></li><li class="tocline"><a href="#the-oneormorekeyframes-typedef" class="tocxref"><span class="secno">6.18 </span>The <code>OneOrMoreKeyframes</code> typedef</a></li><li class="tocline"><a href="#the-pathanimationeffect-interface" class="tocxref"><span class="secno">6.19 </span>The <code>PathAnimationEffect</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-10" class="tocxref"><span class="secno">6.19.1 </span>Attributes</a></li></ul></li><li class="tocline"><a href="#the-customeffect-callback-interface" class="tocxref"><span class="secno">6.20 </span>The <code>CustomEffect</code> callback interface</a><ul class="toc"><li class="tocline"><a href="#attributes-11" class="tocxref"><span class="secno">6.20.1 </span>Attributes</a></li><li class="tocline"><a href="#methods-9" class="tocxref"><span class="secno">6.20.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#the-timingevent-interface" class="tocxref"><span class="secno">6.21 </span>The <code>TimingEvent</code> interface</a><ul class="toc"><li class="tocline"><a href="#constructors-5" class="tocxref"><span class="secno">6.21.1 </span>Constructors</a></li><li class="tocline"><a href="#attributes-12" class="tocxref"><span class="secno">6.21.2 </span>Attributes</a></li><li class="tocline"><a href="#dictionary-timingeventinit-members" class="tocxref"><span class="secno">6.21.3 </span>Dictionary <span class="idlType formerLink idlType"><code>TimingEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#extensions-to-the-document-interface" class="tocxref"><span class="secno">6.22 </span>Extensions to the <code>Document</code> interface</a><ul class="toc"><li class="tocline"><a href="#attributes-13" class="tocxref"><span class="secno">6.22.1 </span>Attributes</a></li></ul></li><li class="tocline"><a href="#extensions-to-the-element-interface" class="tocxref"><span class="secno">6.23 </span>Extensions to the <code>Element</code> interface</a><ul class="toc"><li class="tocline"><a href="#methods-10" class="tocxref"><span class="secno">6.23.1 </span>Methods</a></li></ul></li><li class="tocline"><a href="#script-execution-and-live-updates-to-the-model" class="tocxref"><span class="secno">6.24 </span>Script execution and live updates to the model</a></li></ul></li><li class="tocline"><a href="#integration-with-media-fragments" class="tocxref"><span class="secno">7. </span>Integration with Media Fragments</a></li><li class="tocline"><a href="#interaction-with-page-display" class="tocxref"><span class="secno">8. </span>Interaction with page display</a></li><li class="tocline"><a href="#implementation-requirements" class="tocxref"><span class="secno">9. </span>Implementation requirements</a><ul class="toc"><li class="tocline"><a href="#precision" class="tocxref"><span class="secno">9.1 </span>Precision</a></li><li class="tocline"><a href="#conformance-criteria" class="tocxref"><span class="secno">9.2 </span>Conformance criteria</a></li></ul></li><li class="tocline"><a href="#webidl-ref" class="tocxref"><span class="secno">A. </span>Interface summary</a></li><li class="tocline"><a href="#algorithms-for-path-animation-effects" class="tocxref"><span class="secno">B. </span>Algorithms for path animation effects</a></li><li class="tocline"><a href="#algorithms-for-event-dispatch" class="tocxref"><span class="secno">C. </span>Algorithms for event dispatch</a><ul class="toc"><li class="tocline"><a href="#interval-boundaries-and-time-marks" class="tocxref"><span class="secno">C.1 </span>Interval boundaries and time marks</a></li><li class="tocline"><a href="#events-when-sampling-a-timeline" class="tocxref"><span class="secno">C.2 </span>Events when sampling a timeline</a></li><li class="tocline"><a href="#events-when-sampling-a-player" class="tocxref"><span class="secno">C.3 </span>Events when sampling a player</a></li><li class="tocline"><a href="#events-for-a-timed-item-during-regular-sampling" class="tocxref"><span class="secno">C.4 </span>Events for a timed item during regular sampling</a></li><li class="tocline"><a href="#events-for-a-timed-item-during-seeked-event-dispatch" class="tocxref"><span class="secno">C.5 </span>Events for a timed item during seeked event dispatch</a></li></ul></li><li class="tocline"><a href="#acknowledgements" class="tocxref"><span class="secno">D. </span>Acknowledgements</a></li><li class="tocline"><a href="#references" class="tocxref"><span class="secno">E. </span>References</a><ul class="toc"><li class="tocline"><a href="#normative-references" class="tocxref"><span class="secno">E.1 </span>Normative references</a></li><li class="tocline"><a href="#informative-references" class="tocxref"><span class="secno">E.2 </span>Informative references</a></li></ul></li></ul></section>
<section class="informative" id="introduction">
<!--OddPage--><h2><span class="secno">1. </span>Introduction</h2><div class="informative-bg"><p><em>This section is non-normative.</em></p>
<p>
Web Animations defines a model for supporting animation and
synchronization on the Web platform.
It is intended that other specifications will build on this model and
expose its features through declarative means.
In addition, this specification also defines a programming interface to
the model that may be implemented by user agents that provide support
for scripting.
</p>
<section id="use-cases">
<h3><span class="secno">1.1 </span>Use cases</h3>
<p>
The Web Animations model aims at two broad areas of application:
</p>
<dl>
<dt>User interface effects</dt>
<dd>
<p>
Animation can be used to give visual clues and feedback to make
a user interface more readily comprehensible.
</p>
<p>
For example, a user action results in a table row being
removed to represent an item being removed from a shopping cart.
In such a case, fading the row to transparent and then shifting
the subsequent rows up to fill the space over a few hundred
milliseconds provides the user with clear feedback as to the
results of their action as opposed to instantly removing the row
from the DOM.
</p>
<p>
To support this scenario not only are the animated effects of
fading and shifting required, but so is synchronization, both
between the animations, and between animations and scripted
actions (removing the table row from the DOM after the animations
have completed).
</p>
</dd>
<dt>Storytelling and visualisation</dt>
<dd>
<p>
Another type of animation uses the animated effect to convey
a story or represent some information.
Unlike user interface effects which are largely a presentational
adjunct to the content, these animations form an essential part of
the content presented to the user.
</p>
<p>
For example, in an animated cartoon two cats fly through space
to another planet leaving a rainbow trail behind them.
After arriving at the planet a change of scene occurs and the user
should decide whether or not the cats enter a magic mountain by
selecting one of two preset destinations in the scene.
</p>
<p>
This scenario requires the following features:
</p>
<ul>
<li>animated effects for moving characters along a path as well as
warping a path (the rainbow trail),
</li><li>synchronization that allows some actions to happen
simultaneously (the two cats moving) and others in sequence
(the change of scene),
</li><li>play control to allow rewinding the cartoon, or changing its
playback rate to accommodate particular learning or
accessibility needs,
</li><li>the ability to trigger animations in response to user input
</li></ul>
<p>
Similar use cases in this category include visualising physical
phenomena such as spring motion for educational purposes,
or visualising data such as the prevalence of a disease over
a geographical space over a year whereby animation is used to
present the time-based component of the data.
</p>
</dd>
</dl>
</section>
<section id="relationship-to-other-specifications">
<h3><span class="secno">1.2 </span>Relationship to other specifications</h3>
<p>
CSS Transitions [<cite><a class="bibref" href="#bib-CSS3-TRANSITIONS">CSS3-TRANSITIONS</a></cite>], CSS Animations
[<cite><a class="bibref" href="#bib-CSS3-ANIMATIONS">CSS3-ANIMATIONS</a></cite>], and SVG [<cite><a class="bibref" href="#bib-SVG112">SVG112</a></cite>] all provide mechanisms that
generate animated content on a Web page.
Although the three specifications provide many similar features,
they are described in different terms.
This specification proposes an abstract animation model that
encompasses the common features of all three specifications.
This model is backwards-compatible with the current behavior of these
specifications such that they can be defined in terms of this model
without any observable change.
</p>
<p>
The animation features in SVG 1.1 are defined in terms of SMIL
Animation [<cite><a class="bibref" href="#bib-SMIL-ANIMATION">SMIL-ANIMATION</a></cite>].
It is intended that by defining SVG's animation features in terms of
the Web Animations model, the dependency between SVG and SMIL
Animation can be removed.
</p>
<p>
The programming interface component of this specification makes
some additions to interfaces defined in HTML5 [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>].
</p>
</section>
<section id="overview-of-this-specification">
<h3><span class="secno">1.3 </span>Overview of this specification</h3>
<p>
This specification begins by defining an abstract model for animation.
This is followed by a programming interface defined in terms of the
abstract model.
The programming interface is defined in terms of the abstract model
and is only relevant to user agents that provide scripting support.
</p>
</section>
</div></section>
<section class="informative" id="web-animations-model-overview">
<!--OddPage--><h2><span class="secno">2. </span>Web Animations model overview</h2><div class="informative-bg"><p><em>This section is non-normative.</em></p>
<p>
At a glance, the Web Animations model consists of two largely
independent pieces, a <em>timing model</em> and an <em>animation
model</em>. The role of these pieces is as follows:
</p>
<dl>
<dt>Timing model</dt>
<dd>
Takes a moment in time and converts it to a proportional distance
within a single iteration of an animation called the <em>time
fraction</em>.
An <em>iteration index</em> is also generated for animations
that vary as they repeat.
</dd>
<dt>Animation model</dt>
<dd>
Takes the <em>time fractions</em> and <em>iteration indices</em>
produced by the timing model and converts them into a series of values
to apply to the target properties and attributes.
</dd>
</dl>
<p>
Graphically, this flow can be represented as follows:
</p>
<div class="figure">
<img src="img/timing-and-animation-models.svg" width="600" alt="Overview of the operation of the Web Animations model.">
</div>
<p class="caption">
Overview of the operation of the Web Animations model.<br>
The current time is input to the timing model which produces a time
fraction and an iteration index.<br>
These parameters are used as input to the animation model which produces
the values to apply.<br>
</p>
<p>
For example, consider an animation that:
</p>
<ul>
<li>starts after 3 seconds,</li>
<li>runs twice,</li>
<li>takes 2 seconds every time, and</li>
<li>changes the width of a rectangle from 50 pixels to 100
pixels.</li>
</ul>
<p>
The first three points apply to the timing model.
At a time of 6 seconds, it will calculate that the animation should be
half-way through its second iteration and produces the result 0.5.
The animation model then uses that information to calculate a width
for the rectangle of 75.
</p>
<p>
This specification begins with the timing model and then proceeds to
the animation model.
</p>
</div></section>
<section id="timing-model">
<!--OddPage--><h2><span class="secno">3. </span>Timing model</h2>
<p>
This section describes and defines the behavior of the Web Animations
timing model.
<a href="#dfn-timing-event" class="internalDFN">Timing events</a>, however, which are also a feature of the timing
model, are described separately in <a href="#timing-events" class="sectionRef">section 5. Timing events</a>.
</p>
<section class="informative" id="the-timing-model-at-a-glance">
<h3><span class="secno">3.1 </span>The timing model at a glance</h3><div class="informative-bg"><p><em>This section is non-normative.</em></p>
<p>
Two features characterise the Web Animations timing model: it is
<em>stateless</em> and it is <em>hierarchical</em>.
</p>
<section id="stateless">
<h4><span class="secno">3.1.1 </span>Stateless</h4>
<p>
The Web Animations timing model operates by taking an input time and
producing an output time fraction.
Since the output is based solely on the input time and is independent
of previous inputs, the model may be described as stateless.
This gives the model the following properties:
</p>
<dl>
<dt>Frame-rate independent</dt>
<dd>
Since the output is independent of previous inputs, the rate at
which the model is sampled will not affect its progress.
Provided the input times are proportional to the progress of
real-world time, animations will progress at an identical rate
regardless of the capabilities of the device running them.
</dd>
<dt>Direction-agnostic</dt>
<dd>
Since the sequence of inputs is insignificant, the model is
directionless.
This means that the model can be sampled in reverse or even in
a backwards and forwards pattern without requiring any specialized
handling.
</dd>
<dt>Constant-time seeking</dt>
<dd>
Since each input is independent of the previous input, the
processing required to perform a seek operation, even far into the
future, is at least potentially constant.
</dd>
</dl>
<p>
There are a few apparent exceptions to the stateless behavior of the
timing model.
</p>
<p>
Firstly, <a href="#dfn-timing-event" class="internalDFN">timing events</a> are fired when, for example, one sample
falls on the opposite side of an animation's interval boundary to the
previous sample.
This is certainly stative behavior.
However, events should be considered as a layer added on top of the
core timing model.
When no event listeners are registered, the model is stateless.
</p>
<p>
The other exception to this stateless behavior is that a number of
methods defined in the <a href="#script-interface">programming
interface</a> to the model provide play control such as pausing
an item.
These methods are defined in terms of the time at which they are
called and are therefore stative.
These methods are provided primarily for convenience and are not part
of the core timing model but, like events, are layered on top.
</p>
<p>
Finally, each time the model is sampled, it can be considered to
establish a temporary state.
While this temporary state affects the values returned from the <a href="#script-interface">programming interface</a>, it has no
influence on the subsequent samples and hence does not conflict with
the stateless qualities described above.
</p>
</section>
<section id="hierarchical">
<h4><span class="secno">3.1.2 </span>Hierarchical</h4>
<p>
The other characteristic feature of the Web Animations timing model is
that time is inherited.
Time begins with a monotonically increasing time source and cascades
down a number of steps to each animation.
At each step, time may be shifted backwards and forwards, scaled,
reversed, paused, and repeated.
</p>
<div class="figure">
<img src="img/time-hierarchy.svg" width="600" alt="A hierarchy of timing nodes">
</div>
<p class="caption">
A hierarchy of timing nodes.
Each node in the tree derives its time from its parent node.
At the root of the tree is the global clock.
</p>
<p>
A consequence of this hierarchical arrangement is that complex
animation arrangements can be reversed, scheduled, accelerated and so
on as a whole unit since the manipulations applied to the parent
cascade down to its <a href="#dfn-descendant" class="internalDFN">descendants</a>.
Furthermore, since time has a common source, it is easy to synchronize
animations.
</p>
</section>
</div></section>
<section id="timing-model-concepts">
<h3><span class="secno">3.2 </span>Timing model concepts</h3>
<p>
In Web Animations timing is based on a hierarchy of time relationships
between timing nodes.
Parent nodes provide timing information to their child nodes in the form
of <a href="#dfn-time-value" class="internalDFN">time values</a>.
A <dfn id="dfn-time-value">time value</dfn> is a real number which nominally represents
a number of seconds from some moment.
The connection between <a href="#dfn-time-value" class="internalDFN">time values</a> and wall-clock seconds may be
obscured by any number of transformations applied to the value as it
passes through the time hierarchy.
</p>
<p class="annotation">
In the future we may have timelines that are based on UI gestures in
which case the connection between time values and seconds will be
weakened even further.
</p>
<p>
Periodically, the user agent will trigger an update to the timing model
in a process called <dfn id="dfn-sampling">sampling</dfn>.
On each <dfn id="dfn-sample">sample</dfn> the <a href="#dfn-time-value" class="internalDFN">time values</a> of each timing node are
updated.
</p>
<p class="note">
A more precise definition of when the model is updated when scripting is
involved is provided in <a href="#script-execution-and-live-updates-to-the-model" class="sectionRef">section 6.24 Script execution and live updates to the model</a>.
</p>
</section>
<section id="the-global-clock">
<h3><span class="secno">3.3 </span>The global clock</h3>
<p>
At the root of the Web Animations timing hierarchy is the <a href="#dfn-global-clock" class="internalDFN">global
clock</a>.
</p>
<p>
The <dfn id="dfn-global-clock">global clock</dfn> is a source of monotonically increasing
<a href="#dfn-time-value" class="internalDFN">time values</a> unaffected by adjustments to the system clock.
The <a href="#dfn-time-value" class="internalDFN">time values</a> produced by the <a href="#dfn-global-clock" class="internalDFN">global clock</a> represent
wall-clock seconds from an unspecified historical moment.
The absolute value of the <a href="#dfn-time-value" class="internalDFN">time values</a> produced by the <a href="#dfn-global-clock" class="internalDFN">global
clock</a> are insignificant, only their rate of change.
</p>
<p class="note">
Note that the <a href="#dfn-global-clock" class="internalDFN">global clock</a> is not exposed in the <a href="#script-interface">programming interface</a> and nor is it
expected to be exposed by markup.
As a result the moment from which <a href="#dfn-global-clock" class="internalDFN">global clock</a> <a href="#dfn-time-value" class="internalDFN">time values</a>
are measured, that is, the zero time of the clock, is allowed to be
implementation-dependent.
One user agent may measure the number of seconds since the the user
agent was loaded whilst another may use the time when the device was
started.
Both approaches are acceptable and produce no observable difference
in the output of the model.
</p>
</section>
<section id="timelines">
<h3><span class="secno">3.4 </span>Timelines</h3>
<p>
A <dfn id="dfn-timeline">timeline</dfn> provides a source of <a href="#dfn-time-value" class="internalDFN">time values</a> for the
purpose of synchronization.
</p>
<p>
Typically, a <a href="#dfn-timeline" class="internalDFN">timeline</a> is tied to the <a href="#dfn-global-clock" class="internalDFN">global clock</a> such
that its absolute time is calculated as a fixed offset from the time of
the <a href="#dfn-global-clock" class="internalDFN">global clock</a>.
This offset is established by designating some moment as the timeline's
<dfn id="dfn-zero-time">zero time</dfn> and recording the <a href="#dfn-time-value" class="internalDFN">time value</a> of the
<a href="#dfn-global-clock" class="internalDFN">global clock</a> at that moment.
At subsequent moments, the <a href="#dfn-time-value" class="internalDFN">time value</a> of the timeline is
calculated as the difference between the current <a href="#dfn-time-value" class="internalDFN">time value</a> of
the <a href="#dfn-global-clock" class="internalDFN">global clock</a> and the value recorded at the <a href="#dfn-zero-time" class="internalDFN">zero time</a>.
</p>
<p class="annotation">
Note that we anticipate that other types of timelines may be introduced
in the future that are not tied to the global clock.
For example, a timeline whose time values correspond to UI gestures.
</p>
<p>
Since a <a href="#dfn-timeline" class="internalDFN">timeline</a> may be defined to relative a moment that has yet
to occur, it may not always be able to return a meaningful <a href="#dfn-time-value" class="internalDFN">time
value</a>.
A <a href="#dfn-timeline" class="internalDFN">timeline</a> is considered to be <dfn id="dfn-not-started">not started</dfn> when it is
in such a state that it cannot produce a <a href="#dfn-time-value" class="internalDFN">time value</a>.
</p>
<section id="the-document-timeline">
<h4><span class="secno">3.4.1 </span>The document timeline</h4>
<p>
Each document has a <a href="#dfn-timeline" class="internalDFN">timeline</a> called the <dfn id="dfn-document-timeline">document
timeline</dfn> whose <a href="#dfn-time-value" class="internalDFN">time value</a> at a given moment is calculated
as a fixed offset from the <a href="#dfn-global-clock" class="internalDFN">global clock</a> such that its <a href="#dfn-zero-time" class="internalDFN">zero
time</a> corresponds to the moment immediately prior to dispatching
the load event of the document.
Prior to this moment, the <a href="#dfn-document-timeline" class="internalDFN">document timeline</a> is <a href="#dfn-not-started" class="internalDFN">not
started</a>.
</p>
<p>
For documents that support the concept of <a href="http://www.w3.org/TR/html51/dom.html#current-document-readiness
">current document readiness</a>, this is the moment after the <a href="http://www.w3.org/TR/html51/dom.html#current-document-readiness
">current document readiness</a> has changed to "complete" but
before dispatching the load event.
For user agents that support Navigation Timing [<cite><a class="bibref" href="#bib-NAVIGATION-TIMING">NAVIGATION-TIMING</a></cite>],
this occurs between the <em>domComplete</em> and
<em>loadEventStart</em> timings.
</p>
<div class="issue">
This is not correct.
We need a means to start animations prior to document load.
</div>
<p>
Since the <a href="#dfn-document-timeline" class="internalDFN">document timeline</a> is tied to the <a href="#dfn-global-clock" class="internalDFN">global clock</a>
by a fixed offset, <a href="#dfn-time-value" class="internalDFN">time values</a> reported by the <a href="#dfn-document-timeline" class="internalDFN">document
timeline</a> increase monotonically.
Furthermore, since no scaling is applied, these <a href="#dfn-time-value" class="internalDFN">time values</a>
are proportional to wall-clock seconds.
</p>
</section>
</section>
<section id="players">
<h3><span class="secno">3.5 </span>Players</h3>
<div class="informative informative-bg">
<p><em>This section is non-normative.</em></p><p>
The children of a <a href="#dfn-timeline" class="internalDFN">timeline</a> are called <em>players</em>.
A player takes a <a href="#dfn-timed-item" class="internalDFN">timed item</a> which is a static description of
some timed behavior and binds it to a <a href="#dfn-timeline" class="internalDFN">timeline</a> so that it runs.
A player also allows run-time control of the connection between the
<a href="#dfn-timed-item" class="internalDFN">timed item</a> and its <a href="#dfn-timeline" class="internalDFN">timeline</a> by providing pausing,
seeking, and speed control.
The relationship between a player and a <a href="#dfn-timed-item" class="internalDFN">timed item</a> is analogous
to that of a DVD player and a DVD.
</p>
</div>
<p>
A <dfn id="dfn-player">player</dfn> connects a single <a href="#dfn-timed-item" class="internalDFN">timed item</a>, called its
<dfn id="dfn-source-content">source content</dfn>, to a <a href="#dfn-timeline" class="internalDFN">timeline</a> and provides playback
control.
</p>
<p>
A <a href="#dfn-player" class="internalDFN">player</a> records the <a href="#dfn-time-value" class="internalDFN">time value</a> of its <a href="#dfn-timeline" class="internalDFN">timeline</a>
at which its <a href="#dfn-source-content" class="internalDFN">source content</a> is scheduled to begin
as the <dfn title="player start time" id="dfn-player-start-time">start time</dfn>.
</p>
<p>
When a <a href="#dfn-player" class="internalDFN">player</a> is created, it is assigned a globally unique
sequence number called the <dfn id="dfn-player-sequence-number">player sequence number</dfn>.
This number is used to resolve the sort order of players that have the
same <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a> for a variety of
situations such as combining animations, queuing events, and returning
the list of players.
</p>
<p class="annotation">
If we later allow restarting a <a href="#dfn-player" class="internalDFN">player</a> (e.g. by adding
a <code>play()</code> method), we might update the sequence number at
this point and rename it to something more appropriate.
</p>
<section id="the-current-time-of-a-player">
<h4><span class="secno">3.5.1 </span>The current time of a player</h4>
<p>
<a href="#dfn-player" class="internalDFN">Players</a> provide a <a href="#dfn-time-value" class="internalDFN">time value</a> to their <a href="#dfn-source-content" class="internalDFN">source
content</a> called the player's <dfn id="dfn-current-time">current time</dfn>.
The calculation of the <a href="#dfn-current-time" class="internalDFN">current time</a> is as follows:
</p>
<blockquote>
<code><a href="#dfn-current-time" class="internalDFN">current time</a> =
(<var>timeline time</var> - <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start
time</a>) * <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a>
- <a href="#dfn-time-drift" class="internalDFN">time drift</a></code>
</blockquote>
<p>
Where:
</p>
<ul>
<li><var>timeline time</var> is the current <a href="#dfn-time-value" class="internalDFN">time value</a> of the
<a href="#dfn-timeline" class="internalDFN">timeline</a> with which this <a href="#dfn-player" class="internalDFN">player</a> is associated.</li>
<li><var>start time</var> is the player's <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>.</li>
<li><var>playback rate</var> is the player's <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a> value described in <a href="#speed-control" class="sectionRef">section 3.5.3 Speed control</a>.</li>
<li><var>time drift</var> is the <a href="#dfn-time-drift" class="internalDFN">time drift</a> value described in
<a href="#seeking-and-pausing" class="sectionRef">section 3.5.2 Seeking and pausing</a>.</li>
</ul>
<p>
If the <a href="#dfn-timeline" class="internalDFN">timeline</a> with which is <a href="#dfn-player" class="internalDFN">player</a> is associated is
<a href="#dfn-not-started" class="internalDFN">not started</a> then the <a href="#dfn-current-time" class="internalDFN">current time</a> is <code>null</code>.
</p>
<p>
It is often useful to treat the <a href="#dfn-current-time" class="internalDFN">current time</a> as zero when it
would otherwise be <code>null</code>.
We define the <dfn id="dfn-effective-current-time">effective current time</dfn> as being equal
to <a href="#dfn-current-time" class="internalDFN">current time</a> unless the <a href="#dfn-current-time" class="internalDFN">current time</a> is
<code>null</code>,
in which case the <var>effective current time</var> is zero.
</p>
<p>
The procedure for performing manual updates to the <a href="#dfn-current-time" class="internalDFN">current time</a>
is defined in <a href="#performing-a-seek" class="sectionRef">section 3.5.2.6 Performing a seek</a>.
</p>
</section>
<section id="seeking-and-pausing">
<h4><span class="secno">3.5.2 </span>Seeking and pausing</h4>
<p>
Seeking and pausing a player are closely related and are described
here together.
</p>
<section class="informative" id="introduction-to-seeking">
<h5><span class="secno">3.5.2.1 </span>Introduction to seeking</h5><div class="informative-bg"><p><em>This section is non-normative.</em></p>
<p>
Changing the current playback position of a player can be used to
rewind its <a href="#dfn-source-content" class="internalDFN">source content</a> to its start point, fast-forward
to a point in the future, or to provide ad-hoc synchronization
between timed items.
</p>
<p>
However, in Web Animations, the <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start
time</a> of a <a href="#dfn-player" class="internalDFN">player</a> has special significance in determining
the priority of animations (see <a href="#combining-animations" class="sectionRef">section 4.2 Combining animations</a>) and so we cannot simply adjust the <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>.
Instead, an additional offset is introduced called the <a href="#dfn-time-drift" class="internalDFN">time
drift</a> that further offsets a player's <a href="#dfn-current-time" class="internalDFN">current time</a> from
its timeline.
The effect of the <a href="#dfn-time-drift" class="internalDFN">time drift</a> when seeking is illustrated
below.
</p>
<div class="figure">
<img src="img/seeking.svg" width="600" alt="The effect of seeking a player.">
</div>
<p class="caption">
At time <var>t</var>, a seek is performed on the player changing its
<a href="#dfn-current-time" class="internalDFN">current time</a> from 1.5s to 2s.<br>
As a result, the <a href="#dfn-time-drift" class="internalDFN">time drift</a> is set to -0.5s.<br>
Note that the <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a> indicated
by a red star does not change.
</p>
<p>
It is possible to seek a player even if its <a href="#dfn-timeline" class="internalDFN">timeline</a> is
<a href="#dfn-not-started" class="internalDFN">not started</a>.
Once the timeline begins, the player will begin playback from the
seeked time.
</p>
</div></section>
<section class="informative" id="introduction-to-pausing">
<h5><span class="secno">3.5.2.2 </span>Introduction to pausing</h5><div class="informative-bg"><p><em>This section is non-normative.</em></p>
<p>
Pausing can be used to temporarily suspend a <a href="#dfn-player" class="internalDFN">player</a>.
Like seeking, pausing effectively causes the <a href="#dfn-current-time" class="internalDFN">current time</a> of
a player to be offset from its <a href="#dfn-timeline" class="internalDFN">timeline</a> by means of
setting the <a href="#dfn-time-drift" class="internalDFN">time drift</a>.
</p>
<p>
The effect of pausing on a <a href="#dfn-player" class="internalDFN">player</a>'s <a href="#dfn-time-drift" class="internalDFN">time drift</a> is
illustrated below.
</p>
<div class="figure">
<img src="img/pausing.svg" width="600" alt="The effect of pausing a player.">
</div>
<p class="caption">
The effect of pausing a <a href="#dfn-player" class="internalDFN">player</a>.<br>
Whether pausing before or after a <a href="#dfn-player" class="internalDFN">player</a>'s <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>
the duration of the interval during which the <a href="#dfn-player" class="internalDFN">player</a> was
paused is added to the <a href="#dfn-player" class="internalDFN">player</a>'s <a href="#dfn-time-drift" class="internalDFN">time drift</a> whilst the
<a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a> remains unaffected.
</p>
</div></section>
<section id="seeking-and-pausing-properties">
<h5><span class="secno">3.5.2.3 </span>Seeking and pausing properties</h5>
<p>
<a href="#dfn-player" class="internalDFN">Players</a> track three properties related to seeking and
pausing.
</p>
<dl>
<dt><dfn id="dfn-time-drift">time drift</dfn></dt>
<dd>
The offset from a player's scheduled current time as defined by
its <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>, and its actual
current time after accounting for the effects of seeking and
pausing.
The <a href="#dfn-time-drift" class="internalDFN">time drift</a> is initially zero and is updated as per the
definition in <a href="#calculating-the-time-drift" class="sectionRef">section 3.5.2.4 Calculating the time drift</a>.
</dd>
<dt><dfn id="dfn-paused-state">paused state</dfn></dt>
<dd>
A boolean value that is true if the player is currently paused.
The <a href="#dfn-paused-state" class="internalDFN">paused state</a> is initially false.
</dd>
<dt><dfn id="dfn-pause-start-time">pause start time</dfn></dt>
<dd>
The player's <a href="#dfn-effective-current-time" class="internalDFN">effective current time</a> at the time when the
<a href="#dfn-paused-state" class="internalDFN">paused state</a> was last newly true.
The <a href="#dfn-pause-start-time" class="internalDFN">pause start time</a> is initially zero.
</dd>
</dl>
<p>
A number of calculations for performing seeking and pausing are
defined to operate even when the associated <a href="#dfn-timeline" class="internalDFN">timeline</a> is
<a href="#dfn-not-started" class="internalDFN">not started</a>.
For such situations we define the <dfn id="dfn-effective-timeline-time">effective timeline time</dfn>
as the current <a href="#dfn-time-value" class="internalDFN">time value</a> of the <a href="#dfn-timeline" class="internalDFN">timeline</a> associated
with a <a href="#dfn-player" class="internalDFN">player</a>;
if the timeline is <a href="#dfn-not-started" class="internalDFN">not started</a>, then the <var>effective
timeline time</var> is zero.
</p>
</section>
<section id="calculating-the-time-drift">
<h5><span class="secno">3.5.2.4 </span>Calculating the time drift</h5>
<p>
The <a href="#dfn-time-drift" class="internalDFN">time drift</a> value is both a stored and a calculated value.
When a player is paused, the value is calculated from the <a href="#dfn-pause-start-time" class="internalDFN">pause
start time</a>.
When a player is not paused, the stored value is used.
The stored value is initially zero, and is updated when the player
is unpaused or seeked.
</p>
<p>
The value of <a href="#dfn-time-drift" class="internalDFN">time drift</a> at a given moment is calculated as
follows:
</p>
<dl class="switch">
<dt>If the <a href="#dfn-paused-state" class="internalDFN">paused state</a> is true,</dt>
<dd>
Return the result of
<code>(<a href="#dfn-effective-timeline-time" class="internalDFN">effective timeline time</a> - <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>) * <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a> -
<a href="#dfn-pause-start-time" class="internalDFN">pause start time</a></code>.
</dd>
<dt>Otherwise,</dt>
<dd>
Return the stored value for this property.
</dd>
</dl>
<p class="todo">
These formulae need to be verified since removing the special
behavior regarding pausing before the start time.
</p>
</section>
<section id="updating-the-paused-state">
<h5><span class="secno">3.5.2.5 </span>Updating the <a href="#dfn-paused-state" class="internalDFN">paused state</a></h5>
<p>
The procedure for updating the <a href="#dfn-paused-state" class="internalDFN">paused state</a> is as
follows:
</p>
<ol>
<li>
Let <var>new value</var> be the new paused state to set.
</li>
<li>
If <var>new value</var> equals the current <a href="#dfn-paused-state" class="internalDFN">paused state</a>,
return.
</li>
<li>
The next step depends on the current <a href="#dfn-paused-state" class="internalDFN">paused state</a> as
follows,
<dl class="switch">
<dt>If <a href="#dfn-paused-state" class="internalDFN">paused state</a> is true,</dt>
<dd>
Set the <em>stored</em> value of <a href="#dfn-time-drift" class="internalDFN">time drift</a> to the
<em>current calculated</em> value of <a href="#dfn-time-drift" class="internalDFN">time drift</a> as
defined in <a href="#calculating-the-time-drift" class="sectionRef">section 3.5.2.4 Calculating the time drift</a>.
</dd>
<dt>Otherwise,</dt>
<dd>
Record the current value of the <a href="#dfn-effective-current-time" class="internalDFN">effective current time</a>
as <a href="#dfn-pause-start-time" class="internalDFN">pause start time</a>.
</dd>
</dl>
</li>
<li>
Update <a href="#dfn-paused-state" class="internalDFN">paused state</a> to <var>new value</var>.
</li>
</ol>
</section>
<section id="performing-a-seek">
<h5><span class="secno">3.5.2.6 </span>Performing a seek</h5>
<p>
<dfn id="dfn-seeking">Seeking</dfn> is the process of updating a player's <a href="#dfn-current-time" class="internalDFN">current
time</a> to a desired value.
It is achieved using the following procedure:
</p>
<ol>
<li>Let <var>seek time</var> be the desired <a href="#dfn-time-value" class="internalDFN">time value</a> for
the player's <a href="#dfn-current-time" class="internalDFN">current time</a>.</li>
<li>The steps for adjusting the <a href="#dfn-current-time" class="internalDFN">current time</a> depend on the
<a href="#dfn-paused-state" class="internalDFN">paused state</a> as follows:
<dl class="switch">
<dt>If the <a href="#dfn-paused-state" class="internalDFN">paused state</a> is true,</dt>
<dd>
Set <a href="#dfn-pause-start-time" class="internalDFN">pause start time</a> to <var>seek time</var>.
</dd>
<dt>If the <a href="#dfn-paused-state" class="internalDFN">paused state</a> is false,</dt>
<dd>
Set the stored value for the <a href="#dfn-time-drift" class="internalDFN">time drift</a> to
the result of evaluating
<code>(<a href="#dfn-effective-timeline-time" class="internalDFN">effective timeline time</a> - <a title="player start time" href="#dfn-player-start-time" class="internalDFN">start time</a>)
* <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a> -
<var>seek time</var></code>.
</dd>
</dl>
</li>
</ol>
<p>
The <a href="#dfn-timing-event" class="internalDFN">timing events</a> queued when a seek is performed are
described in <a href="#event-dispatch-and-seeking-a-player" class="sectionRef">section 5.7.2 Event dispatch and seeking a player</a>.
</p>
</section>
</section>
<section id="speed-control">
<h4><span class="secno">3.5.3 </span>Speed control</h4>
<div class="informative informative-bg">
<p><em>This section is non-normative.</em></p><p>
The rate of play of a player can be controlled by setting its
<em>playback rate</em>.
For example, setting a playback rate of 2 will cause the player's
<a href="#dfn-current-time" class="internalDFN">current time</a> to increase at twice the rate of its
<a href="#dfn-timeline" class="internalDFN">timeline</a>.
Similarly, a playback rate of -1 will cause the player's <a href="#dfn-current-time" class="internalDFN">current
time</a> to decrease at the same rate as the <a href="#dfn-time-value" class="internalDFN">time values</a> from
its <a href="#dfn-timeline" class="internalDFN">timeline</a> increase.
</p>
<p>
Note that <a href="#dfn-timed-item" class="internalDFN">timed items</a> also have a <a title="timed item playback rate" href="#dfn-timed-item-playback-rate" class="internalDFN">playback rate</a> associated with
them that behaves differently to that defined here.
</p>
</div>
<p>
<a href="#dfn-player" class="internalDFN">Players</a> have a <dfn title="player playback
rate" id="dfn-player-playback-rate">playback rate</dfn> that provides a scaling factor from the rate
of change of the associated <a href="#dfn-timeline" class="internalDFN">timeline</a>'s <a href="#dfn-time-value" class="internalDFN">time values</a> to
the player's <a href="#dfn-current-time" class="internalDFN">current time</a>.
The <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a> is initially 1.
</p>
<p>
Setting a player's <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a>
to zero effectively pauses the player but without affecting the
player's <a href="#dfn-paused-state" class="internalDFN">paused state</a>.
</p>
<section id="updating-the-playback-rate">
<h5><span class="secno">3.5.3.1 </span>Updating the playback rate</h5>
<p>
Changes to the <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a>
also trigger a compensatory seek so that that the player's
<a href="#dfn-current-time" class="internalDFN">current time</a> is unaffected by the change to the playback
rate.
</p>
<p>
The procedure is as follows:
</p>
<ol>
<li>Let <var>previous time</var> be the value of the <a href="#dfn-effective-current-time" class="internalDFN">effective
current time</a> before updating the <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a>.</li>
<li>Update the <a title="player playback rate" href="#dfn-player-playback-rate" class="internalDFN">playback rate</a> to
the new value.</li>
<li>Seek to <var>previous time</var> using the procedure defined in
<a href="#performing-a-seek" class="sectionRef">section 3.5.2.6 Performing a seek</a>.</li>
</ol>
</section>
</section>
</section>
<section id="timed-items">
<h3><span class="secno">3.6 </span>Timed items</h3>
<p>
The <a href="#dfn-source-content" class="internalDFN">source content</a> of a <a href="#dfn-player" class="internalDFN">player</a>, if set, is a type of
<dfn id="dfn-timed-item">timed item</dfn>.
There are two types of <a href="#dfn-timed-item" class="internalDFN">timed item</a>:
</p>
<ul>
<li><a href="#dfn-animation" class="internalDFN">animations</a>, and</li>
<li><a href="#dfn-timing-group" class="internalDFN">timing groups</a>.</li>
</ul>
<p>
At a given moment, a <a href="#dfn-timed-item" class="internalDFN">timed item</a> can be associated with at most
one <a href="#dfn-player" class="internalDFN">player</a>.
</p>
<p>
<a href="#dfn-timed-item" class="internalDFN">Timed items</a> can be chained together into a hierarchy using
<a>timings groups</a>.
Only the <a href="#dfn-root" class="internalDFN">root</a> <a href="#dfn-timed-item" class="internalDFN">timed item</a> of such a hierarchy can be <dfn title="directly associated with a player" id="dfn-directly-associated-with-a-player">directly associated</dfn> with
a <a href="#dfn-player" class="internalDFN">player</a>.
Attempting to associate a <a href="#dfn-timed-item" class="internalDFN">timed item</a> that has a <a href="#dfn-parent-timing-group" class="internalDFN">parent timing
group</a> with a <a href="#dfn-player" class="internalDFN">player</a> results in the <a href="#dfn-timed-item" class="internalDFN">timed item</a> being
removed from the <a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a> first.
A <a href="#dfn-timed-item" class="internalDFN">timed item</a> with an <a href="#dfn-ancestor" class="internalDFN">ancestor</a> <a href="#dfn-timing-group" class="internalDFN">timing group</a> that is
<a href="#dfn-directly-associated-with-a-player" class="internalDFN">directly associated with a player</a> is <dfn title="indirectly associated with a player" id="dfn-indirectly-associated-with-a-player">indirectly associated</dfn>
with that <a href="#dfn-player" class="internalDFN">player</a>.
</p>
<p>
A <a href="#dfn-timed-item" class="internalDFN">timed item</a>, <var>item</var>, is <dfn id="dfn-associated-with-a-timeline">associated with
a timeline</dfn>, <var>timeline</var>, if <var>item</var> is
<a title="directly associated with a player" href="#dfn-directly-associated-with-a-player" class="internalDFN">directly</a> or
<a title="indirectly associated with a player" href="#dfn-indirectly-associated-with-a-player" class="internalDFN">indirectly</a> associated
with a <a href="#dfn-player" class="internalDFN">player</a> which, in turn, is associated with
<var>timeline</var>.
</p>
<p>
All types of <a href="#dfn-timed-item" class="internalDFN">timed item</a> define a number of common properties
which are described in the following sections.
</p>
<section id="the-active-interval">
<h4><span class="secno">3.6.1 </span>The active interval</h4>
<div class="informative informative-bg">
<p><em>This section is non-normative.</em></p><p>
The period that a <a href="#dfn-timed-item" class="internalDFN">timed item</a> is scheduled to run is called
its <a href="#dfn-active-interval" class="internalDFN">active interval</a>.
Each <a href="#dfn-timed-item" class="internalDFN">timed item</a> has only one such interval.
</p>
<p>
The lower bound of the <a href="#dfn-active-interval" class="internalDFN">active interval</a> is determined by the
<a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> of the <a href="#dfn-timed-item" class="internalDFN">timed
item</a> but may be shifted by a <a href="#dfn-start-delay" class="internalDFN">start delay</a> on the <a href="#dfn-timed-item" class="internalDFN">timed
item</a>.
</p>
<p>
The upper bound of the interval is determined by the <a href="#dfn-active-duration" class="internalDFN">active
duration</a>.
</p>
<p>
The relationship between the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start
time</a>, <a href="#dfn-start-delay" class="internalDFN">start delay</a>, and <a href="#dfn-active-duration" class="internalDFN">active duration</a> is
illustrated below.
</p>
<div class="figure">
<img src="img/active-interval-examples.svg" width="600" alt="Examples of the effect of the start delay on the endpoints
of the active interval">
</div>
<p class="caption">
Examples of the effect of the <a href="#dfn-start-delay" class="internalDFN">start delay</a> on the endpoints of
the <a href="#dfn-active-interval" class="internalDFN">active interval</a>.<br>
(a) A timed item with no delay; the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> and beginning of the
<a href="#dfn-active-interval" class="internalDFN">active interval</a> are coincident.<br>
(b) A timed item with a positive delay; the beginning of the
<a href="#dfn-active-interval" class="internalDFN">active interval</a> is deferred by the delay.<br>
(c) A timed item with a negative delay; the beginning of the
<a href="#dfn-active-interval" class="internalDFN">active interval</a> is brought forward by the delay.
</p>
</div>
<p>
<a href="#dfn-timed-item" class="internalDFN">Timed items</a> define an <dfn id="dfn-active-interval">active interval</dfn> which is the
period of time during which the item is scheduled to produce its
effect with the exception of <a href="#dfn-fill-mode" class="internalDFN">fill modes</a> which apply outside
the <a href="#dfn-active-interval" class="internalDFN">active interval</a>.
</p>
<p>
The lower bound of the <a href="#dfn-active-interval" class="internalDFN">active interval</a> is defined by the
combination of the timed item's <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start
time</a> and <a href="#dfn-start-delay" class="internalDFN">start delay</a>
</p>
<p>
A <a href="#dfn-timed-item" class="internalDFN">timed item</a>'s <dfn title="timed item start time" id="dfn-timed-item-start-time">start
time</dfn> is the moment at which the <a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a>, if
any, has scheduled the <a href="#dfn-timed-item" class="internalDFN">timed item</a> to begin.
It is expressed in <a href="#dfn-inherited-time" class="internalDFN">inherited time</a>.
In most cases, including the case when the <a href="#dfn-timed-item" class="internalDFN">timed item</a> has no
<a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a>, the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start
time</a> is zero.
The singular exception is <a href="#dfn-sequence-timing-group" class="internalDFN">sequence timing groups</a> which set the
<a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start times</a> of their children as
described in <a href="#the-start-time-of-children-of-a-sequence-timing-group" class="sectionRef">section 3.13.4.1 The start time of children of a sequence timing group</a>.
</p>
<p>
In addition to the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a>,
a <a href="#dfn-timed-item" class="internalDFN">timed item</a> also has a <dfn id="dfn-start-delay">start delay</dfn> which is an
offset from the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a>.
Unlike the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> which is
determined by the <a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a>, the <a href="#dfn-start-delay" class="internalDFN">start delay</a>
is a property of the <a href="#dfn-timed-item" class="internalDFN">timed item</a> itself.
</p>
<p>
The lower bound of the <a href="#dfn-active-interval" class="internalDFN">active interval</a><a> of a </a><a href="#dfn-timed-item" class="internalDFN">timed item</a>,
expressed in <a title="inherited time" href="#dfn-inherited-time" class="internalDFN">inherited time space</a>, is
the sum of the <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> and the
<a href="#dfn-start-delay" class="internalDFN">start delay</a>.
</p>
<p>
These definitions are incorporated in the calculation of the <a href="#dfn-local-time" class="internalDFN">local
time</a> (see <a href="#local-time-and-inherited-time" class="sectionRef">section 3.6.2 Local time and inherited time</a>) and <a href="#dfn-active-time" class="internalDFN">active time</a>.
</p>
<p>
The length of the <a href="#dfn-active-interval" class="internalDFN">active interval</a> is called the <dfn id="dfn-active-duration">active
duration</dfn>, the calculation of which is defined in <a href="#calculating-the-active-duration" class="sectionRef">section 3.10.2 Calculating the active duration</a>.
</p>
</section>
<section id="local-time-and-inherited-time">
<h4><span class="secno">3.6.2 </span>Local time and inherited time</h4>
<div class="informative informative-bg">
<p><em>This section is non-normative.</em></p><p>
In Web Animations all times are relative to some point of reference.
These different points of reference produce different <em>time
spaces</em>.
</p>
<p>
This can be compared to coordinate spaces as used in computer
graphics.
The zero time of a time space is analogous to the origin of
a coordinate space.
</p>
<p>
Just as with coordinate spaces, time spaces can also be nested.
<a href="#dfn-timing-group" class="internalDFN">Timing groups</a> typically perform some
transformations on the <a href="#dfn-time-value" class="internalDFN">time values</a> they
receive from their <a title="parent timing group" href="#dfn-parent-timing-group" class="internalDFN">parent</a> or
<a href="#dfn-player" class="internalDFN">player</a> before passing on the transformed <a href="#dfn-time-value" class="internalDFN">time values</a>
to their children.
Child <a href="#dfn-timed-item" class="internalDFN">timed items</a> then operate <em>within</em> that
transformed time space.
</p>
<p>
Children take the transformed time values from their
parent—called the <a href="#dfn-inherited-time" class="internalDFN">inherited time</a>— and add their
<a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> to establish their
own <a title="local time" href="#dfn-local-time" class="internalDFN">local time space</a> as illustrated below.
</p>
<div class="figure">
<img src="img/local-time.svg" width="600" alt="Inherited time and local time.">
</div>
<p class="caption">
Inherited time and local time.<br>
At time <var>t</var>, the <a href="#dfn-inherited-time" class="internalDFN">inherited time</a> is 2.5.<br>
For <a href="#dfn-timed-item" class="internalDFN">timed item</a> (a) which has a <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> of 1, the <a href="#dfn-local-time" class="internalDFN">local
time</a> is 1.5.<br>
For <a href="#dfn-timed-item" class="internalDFN">timed item</a> (b) which has a <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> of 1
and a <a href="#dfn-start-delay" class="internalDFN">start delay</a> of 1,
the <a href="#dfn-local-time" class="internalDFN">local time</a> is also 1.5
since <a href="#dfn-local-time" class="internalDFN">local time</a> is based on a <a href="#dfn-timed-item" class="internalDFN">timed item</a>'s
<a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a> only,
and not on its <a href="#dfn-start-delay" class="internalDFN">start delay</a>.
</p>
</div>
<p>
For a <a href="#dfn-timed-item" class="internalDFN">timed item</a>, the <dfn id="dfn-inherited-time">inherited time</dfn> at
a given moment is based on the first matching condition from the
following:
</p>
<dl class="switch">
<dt>If the <a href="#dfn-timed-item" class="internalDFN">timed item</a> has a <a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a>,</dt>
<dd>
the inherited time is the <a href="#dfn-parent-timing-group" class="internalDFN">parent timing group</a>'s current
<a title="transformed time" href="#dfn-transformed-time" class="internalDFN">transformed time value</a>.
</dd>
<dt>If the <a href="#dfn-timed-item" class="internalDFN">timed item</a> is directly associated with
a <a href="#dfn-player" class="internalDFN">player</a>,</dt>
<dd>
the inherited time is the <a href="#dfn-current-time" class="internalDFN">current time</a> of the
<a href="#dfn-player" class="internalDFN">player</a>.
</dd>
<dt>Otherwise,</dt>
<dd>
the inherited time is <code>null</code>.
</dd>
</dl>
<p>
The <dfn id="dfn-local-time">local time</dfn> of a <a href="#dfn-timed-item" class="internalDFN">timed item</a> is the <a href="#dfn-timed-item" class="internalDFN">timed
item</a>'s <a href="#dfn-inherited-time" class="internalDFN">inherited time</a> minus its <a title="timed item start time" href="#dfn-timed-item-start-time" class="internalDFN">start time</a>.
If the <a href="#dfn-inherited-time" class="internalDFN">inherited time</a> is <code>null</code> then the local time
is also <code>null</code>.
</p>
</section>
<section id="timed-item-states">
<h4><span class="secno">3.6.3 </span>Timed item states</h4>
<div class="informative informative-bg">
<p><em>This section is non-normative.</em></p><p>
At given moment, a <a href="#dfn-timed-item" class="internalDFN">timed item</a> may be described as being in
one of several overlapping states.
These states are only established for the duration of a single
sample and are primarily a convenience for describing stative parts
of the model such as event dispatch.
</p>
<p>
The different states are illustrated below.
</p>
<div class="figure">
<img src="img/timed-item-states.svg" width="700" alt="An example of the different states used for describing a
timed item.">
</div>
<p class="caption">
An example of the different states used for describing a <a href="#dfn-timed-item" class="internalDFN">timed
item</a> at a given time.
Note that a <a href="#dfn-timed-item" class="internalDFN">timed item</a> is considered to be <a href="#dfn-in-effect" class="internalDFN">in effect</a>
for all times inside the <a href="#dfn-active-interval" class="internalDFN">active interval</a> as well as times
outside the <a href="#dfn-active-interval" class="internalDFN">active interval</a> where a <a href="#dfn-fill-mode" class="internalDFN">fill mode</a> is
applied.