Transición SMIL

La Transición puede generar efectos como 'aparecer y desaparecer' y 'borrar' para los elementos.

La Transición pertenece a SMIL 2.0

La Transición es una nueva característica de SMIL 2.0. La Transición no es parte de la especificación SMIL 1.0.

Internet Explorer 6 admite la Transición basada en la especificación SMIL 2.0. La Transición se implementa mediante el elemento <transitionfilter>.

Atributos

<elemento transitionfilter> tiene varios elementos, los más comunes son:

Atributos Descripción Ejemplo
type Define el tipo de filtro de transición (consulte la lista de filtros de transición) type="clockWipe"
begin Define cuándo comenzar la transición begin="0s"
mode Define el modo de transición mode="in"
from Define el valor inicial de la transición from="0.2"
to Define el valor final de la transición to="0.8"

Filtros de transición

Se pueden usar los siguientes filtros de transición:

fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe 
pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe

Ejemplo: Mostrar Transición

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:transitionfilter targetelement="keyb"
type="clockWipe"
begin="keyb.begin" dur="2s" />
<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"
width="128" height="107" />
</body>
</html>

En el ejemplo anterior, la imagen se mostrará durante 4 segundos. El filtro de transición mostrará la imagen durante 2 segundos en el modo "clockWipe".

Consejo:Debe ejecutar Internet Explorer 6 para mostrar este ejemplo.

TIY