Animation changes a style attribute of its parent element for a while. TTML1 has one
animation element, set, which swaps in a new value. TTML2 adds
animate, which moves through a list of values, and lets both be defined
once and reused.
Animation elements
| Element | In | Attributes | Content |
|---|---|---|---|
set | body, div, p, span, region; in TTML2 also animation, image, audio | begin, end, dur, xml, the style attribute to change with its single new value; in TTML2 also condition, fill, repeatCount | metadata* |
animate | TTML2: as set | begin, end, dur, calcMode, keyTimes, keySplines, fill, repeatCount, condition, xml, any number of style attributes, each holding a list of values | metadata* |
animation | TTML2: head | xml | metadata*, then set and animate elements |
Inside animation (out of line), set and
animate need an xml:id. A content element or region uses
them with animate="id1 id2": each is copied in as if it were the last
animation child of that element. An animation’s times count from the start of the
element it animates.
Animation attributes
| Attribute | Values | Default | Meaning |
|---|---|---|---|
calcMode | discrete, linear, paced, spline | linear | How values change between key times: jump, straight line, even speed across the whole list, or a Bézier curve. |
keyTimes | numbers from 0 to 1 separated by ; | evenly spaced | When each value is reached, as a fraction of the duration. There must be one per value. Not allowed with paced. |
keySplines | groups of four numbers x1 y1 x2 y2, each 0 to 1, separated by ; | none | The Bézier control points for each interval; one group fewer than key times. Required with spline and allowed only with it. |
fill | freeze, remove | remove | Whether the last value stays when the animation ends, or the value goes back. |
repeatCount | a number above 0, or indefinite | 1 | How many times the animation plays. |
An animate style attribute holds values separated by ;, with
\ escaping a literal semicolon. The SMIL attributes
attributeName, from, to, by,
values, additive and accumulate are not used.
An error in calcMode, keyTimes or keySplines
makes the animation be ignored.
What can be animated
Every style attribute can be animated discretely, except tts:ruby,
tta:pitch and tta:speak. These can also change smoothly
(continuously) with animate: tts:backgroundColor,
tts:color, tts:disparity, tts:luminanceGain,
tts:opacity, tts:position, tta:gain,
tta:pan, and the colour part of tts:border,
tts:textEmphasis, tts:textOutline and
tts:textShadow.
Worked example
<p begin="10s" end="14s">
<set begin="1s" end="2s" tts:color="yellow"/>
<animate begin="0s" dur="1s" fill="freeze" tts:opacity="0;1"/>
Look out!
</p>