HTML+TIME (Timed Interactive Multimedia Extensions)

HTML+TIMEとは、動的な要素をHTMLページで実現できる技術です。対応するブラウザはInternet Explorer 5.5～8.0で、9以降では利用できません。

導入

HTML+TIMEの要素を利用するには、まずXML名前空間の:tを、html要素で宣言します。

<html xmlns:t="urn:schemas-microsoft-com:time">

そしてIMPORT処理命令で、タグ定義をインポートします。IMPORT Processing Instruction | MSDN

<?IMPORT namespace="t" implementation="#default#time2">

さらに要素をtime2 behaviorに関連付けるため、CSSのスタイルで宣言します。behavior property (Internet Explorer) | MSDN

.time { behavior: url(#default#time2); }

使用例

A、B、Cの文字を、1秒ごとに順に表示します。

実行 Internet Explorer 5.5～8.0でしか動作しません。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:t="urn:schemas-microsoft-com:time">

<head>
    <style type="text/css">
        .time { behavior: url(#default#time2); }
    </style>
    <?IMPORT namespace="t" implementation="#default#time2">
</head>
<body>

<t:seq begin="0" dur="indefinite" >
    <div class="time" dur="1">A</div> <!-- 1秒間 表示する -->
    <div class="time" dur="1">B</div>
    <div class="time" dur="1">C</div>
</t:seq>

</body>
</html>

参考

アニメーション

t:ANIMATE要素により、style属性の値を変化させられます。

<div id="foo" style="position: absolute; left: 0px">ABC</div>

<!-- 上記要素のleft属性を、100になるまで3秒間で変更する -->
<t:animate targetelement="foo" attributename="left" to="100" dur="3" />

animate Object | MSDN

属性 / プロパティ

fill

親要素のタイムラインより前に終了したときの動作を定義できます。

<ELEMENT FILL = sAction... >

値
freeze
hold
remove
transition

fill Property (t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, ...) | MSDN

begin

要素のタイムラインが開始されるまでの遅延時間を設定できます。begin Property (t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, ...) | MSDN

次の例ではbutton要素がクリックされてから2秒後に、要素のタイムラインが開始されます。

<button id="button1">Start</button>

<div id="foo" style="position: absolute; left: 0px">ABC</div>
<t:animate targetelement="foo" attributename="left" to="100" dur="3" begin="button1.click+2" />

参考

ＨＴＭＬ＋ＴＩＭＥ

HTMLの情報サイトから、まとめて検索