Transição SMIL

A Transição pode gerar efeitos como "fundo suave" e "apagamento" para elementos.

A Transição pertence ao SMIL 2.0

A Transição é uma nova característica do SMIL 2.0. A Transição não faz parte do padrão SMIL 1.0.

O Internet Explorer 6 suporta Transição baseada no padrão SMIL 2.0. A Transição é implementada pelo elemento <transitionfilter>.

propriedades

<elemento transitionfilter> possui vários elementos, os mais comuns são:

propriedades descrição exemplo
type define o tipo do filtro de transição (ver lista de filtros de transição) type="clockWipe"
begin define quando a transição começa begin="0s"
mode define o modo da transição mode="in"
from define o valor inicial da transição from="0.2"
to define o valor final da transição to="0.8"

Filtros de Transição

é possível usar os seguintes filtros de transição:

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

Exemplo: Exibir Transição

<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>

No exemplo acima, a imagem será exibida por 4 segundos. O filtro de transição exibirá a imagem em 2 segundos usando o modo "clockWipe".

Dica:Você deve executar o Internet Explorer 6 para exibir este exemplo.

TIY