t:ANIMATECOLOR에 의하여 진행되는 애니메이션 종료의 색상값이나 종료 속성을 반환하거나 설정한다.

인수
: (속성 값)

속성값은 t:ANIMATECOLOR에 의하여 진행되는 애니메이션 종료의 색상값이나 종료 속성을 나타내는 값이다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

특기

by 속성은 to 속성과 동일한 엘레멘트에서 사용될 수 없다. 두값이 모두 설정되었으면 by 속성값이 무시된다.

t:ANIMATECOLOR에서 유효한 애트리뷰트값은 16진수 RGB 색상값이나 색상값 키워드로 예를들어 #0000ff 혹은 blue이다. 추가적인 정보는 색상표를 참조하라.

from 속성값 설정 없이 to 속성값을 설정하면, 설정된 additive 속성값에 영향을 줄 수 있다..

활성 중인 애니메이션에서 속성들을 스트립트를 사용하여 탄력적으로 변경시키려면, 제작자는 몇가지 주의하여아 한다. 활성 애니메이션의 속성값들을 변경하여 발생 할 수 있는 시도하지 않은 결과를 피하기 위하여, 애니메이션을 beginElement 메서드를 사용하여 다시 시작한다. 예를들면

<SCRIPT>
object.endElement();
object.to='#ffffaa';
object.beginElement();
</SCRIPT>

animate, animateMotion과 animateColor 개체는 HTML time2 비헤이버를 사용하고 다음의 모델에 의하여 애니메이션 속성들을 평가한다.

적용
개체scriptHTML규격IE
참조
HTML+time begin by clacMode dur fill from targetElement to values 색상표

t:ANIMATECOLOR의 from, 속성 예제

외부 DIV
내부 DIV

결과 표시창

두개의 t:ANIMATECOLOR 엘레멘트가 각각 div 엘레멘트의 backgroundColor를 변경시키며, 내부 DIV은 배경색이 연초록에서 노랑으로, DIV 외부 은 노랑에서 연초록으로 애니메이션된다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function showAll(obj){
  objid=obj.id;
  str=objid+'.attributeName='+obj.attributeName+'<BR>';
  str+=objid+'.from='+obj.from+'<BR>';
  str+=objid+'.to='+obj.to+'<BR>';
  str+=objid+'.targetElement='+obj.targetElement+'<BR>';
  str+=objid+'.begin='+obj.begin+'<BR>';
  str+=objid+'.dur='+obj.dur+'<BR>';
  str+=objid+'.fill='+obj.fill+'<BR>';
  str+=objid+'.calcMode='+obj.calcMode+'<BR>';
  if (objid=='ac1Obj') str+='outerDIV.style.backgroundColor='+outerDIV.style.backgroundColor+'<BR>';
  else str+='innerDIV.style.backgroundColor='+innerDIV.style.backgroundColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:PAR id="parObj" begin="0" dur="15" fill="hold">
<T:ANIMATECOLOR id="ac1Obj" attributeName="background-color" from="yellow" to="lightgreen"
  targetElement="outerDIV" begin="0" dur="5" fill="hold"/>
<DIV id="outerDIV" class="time"
  style="font-size:18;left:100;border:solid 3 red;position:absolute;width:400;height:200;
    background-color:red;text-align:center;padding:9">외부 DIV</DIV><BR><BR>

<T:ANIMATECOLOR id="ac2Obj" attributeName="background-color" from="lightgreen" to="yellow"
  targetElement="innerDIV" begin="0" dur="5" fill="hold"/>
</T:PAR>
<DIV id="innerDIV" class="time"
  style="font-size:18;left:150;border:dotted 3 blue;position:absolute;width:300;height:100;
    background-color:blue;text-align:center;padding:9">내부 DIV</DIV>
<P style=margin-top:190></P>
<BUTTON onclick="parObj.beginElement()">다시 시작</BUTTON>
<BUTTON onclick="showAll(ac1Obj)">외부 내용 보기</BUTTON>
<BUTTON onclick="showAll(ac2Obj)">내부 내용 보기</BUTTON>
<DIV id=showA>결과 표시창</DIV>
</BODY>
</HTML>