From W3C Wiki
Jump to: navigation, search

< Change Proposal Index

Animation beyond <set> - CLOSED

  • Owner: Pierre-Anthony Lemieux.
  • Started: 14/06/13

Issues Addressed


TTML1 allows only discrete stepped animation using the <set> element.

This work package would define a mechanism for smooth animation which is a forward compatible extension of the <set> syntax.

This allows the following effects, among others, to be defined:

  • window fade in/out
  • fade-up/down without repeating a large number of <set> elements for each fade-up/down

  • smooth resizing of regions
  • smooth scrolling of region content

For example to allow something like the following:

       <set begin="10s" end="20s" target="fadeRegion" function="ease-in">
       <!-- default for function is step-start -->
        <key at="0%" tts:marginLeft="100%" tts:width="300" />
        <key at="100%" tts:marginLeft="0%" tts:width="300"/>
In terms of CSS the above would map to:
        /* maps to */
        .fadeRegion {
          animation-duration: 10s;   /* the duration of the set element */
          animation-name: guid;   /* name is generateted */
          animation-timing-fucntion: ease-in;       
        /* since the animation will resolve to when the faderegion section is added to the dom, it needs no delay.
        @keyframes guid {
         0% {
            margin-left: 100%;
            width: 300%
        100% {
            margin-left: 0%;
            width: 100%;

Edits to be applied


Edits applied


  • Simplifies conversion from 708 and digital cinema content.
  • Closer approximation to a Television experience for rollup and paint on captioning
== References ==