Share via

Animation and Timing

  • Article

This is preliminary documentation and subject to change.

The animation of visual elements can be controlled either from script or from markup files. Only certain properties of display elements can be animated, and they are specified in the specification as being animatable.

There are two types of timing, inline and block. Inline timing is defined directly on body elements and is intended to be used primarily for subtitles. For an example of inline timing see Defining Subtitles.

Block timing is defined within a timing element in the document's head. This is the preferred method for controlling animation in a markup file, though inline timing is acceptable.

Note   You can only use one type per markup file; you cannot mix inline and block timing.

The following example markup shows how to set block timing for an animation:

<timing clock="page">
    <!-- The cue element associates the animation with a 
        specific item--in this case the element with 
        id=myButton.
     -->
    <cue select="id('myButton')" begin="10s" end="20s">
        <!-- Move selected items left to right over 10 seconds.
        -->
        <animate begin="0s" end="10s" style:x="100px;200px" /> 
    </cue>
</timing>

You can set the clock to be based on the application, page, or title time.

Note    Don't forget to include the units after the values, for example using s to specify seconds or f to specify frames.

See Also