animateColor의 attributeName, begin, by, clacMode, dur, fill, targetElement 속성 예제

outerDIV
innerDIV

acObj.currTimeState.simpleTime=0

결과 표시창

t:ANIMATECOLOR 엘레멘트를 사용하여 DIV 엘레멘트의 backgroundColor를 애니메이션 한다.
외부 DIV 엘레멘트는 backgroundColor가 #ff0000(red)에서 acObj(t:ANIMATECOLOR) 엘레멘트가 5초동안에 차이값 by 속성값 #ffff00(yellow)로 변환한다.
by 애트리뷰트가 추거적(additive)이므로, outerDIV의 backgroundColor는 애니메이션되는 동안에 점진적으로 #ffff00(yellow)와 #ff0000(red)가 합산 계산되고 #ffff00(yellow)에 도달되면 애니메이션이 종료된다.
내부 DIV 엘레멘트는 backgroundColor가 pink으로 고정된다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);position:relative;font-size:18;font-weight:bold;text-align:left;padding:5}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function showAll(){
  str='acObj.attributeName='+acObj.attributeName+'<BR>';
  str+='acObj.by='+acObj.by+'<BR>';
  str+='acObj.targetElement='+acObj.targetElement+'<BR>';
  str+='acObj.begin='+acObj.begin+'<BR>';
  str+='acObj.dur='+acObj.dur+'<BR>';
  str+='acObj.fill='+acObj.fill+'<BR>';
  str+='acObj.calcMode='+acObj.calcMode+'<BR>';
  str+='innerDIV.style.backgroundColor='+innerDIV.style.backgroundColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:PAR id="parObj" dur="15" fill="hold">
<T:ANIMATECOLOR id="acObj" targetElement="outerDIV" attributeName="background-color" by="#ffff00" begin="1" dur="5" fill="hold"/>
</T:PAR>

<DIV id="outerDIV" class="time" style=";top:0;left:0;width:500;height:200;background-color:#ff0000;border:solid 2 blue">outerDIV</DIV>
<DIV id="innerDIV" class="time" style="top:-150;left:150;width:200;height:100;background-color:pink;border:solid 2 red;">innerDIV</DIV>
<DIV style="position:relative;top:-100;">
<P>acObj.currTimeState.simpleTime=<SPAN class="time" dur=".1" repeatCount="indefinite"
  onrepeat="innerHTML=acObj.currTimeState.simpleTime" style="font-weight:normal">0</SPAN></P>
<BUTTON onclick="parObj.beginElement()">다시 시작</BUTTON>
<BUTTON onclick="showAll()">내용 보기</BUTTON>
<DIV id="showA">결과 표시창</DIV>
</DIV>
</BODY>
</HTML>