애니메이션의 상대적인 차이(offset)값을 반환하거나 설정한다.

인수
: (속성 문자열)

속성값은 애니메이션의 시간적 진행에따른 상대적인 차이(offset)값을 나타내는 문자열이다.

이 차이값은 애트리뷰트값으로 부처의 차이이고, px, in, cm, mm, pt, pc등 단위 문자열을 포함할 수 있다. 자세한 정보는 CSS 길이 단위를 참조하라.

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

특기

by 속성은 한 엘레멘트에서 to 속성과 같이 사용될 수 없다. 두가지가 설정되면 by 속성값은 무시된다.
그러나 from 속성을 사용하여 애니메이션의 최초값 설정은 선택적이다.

by 속성은 추가적(addition) 값을 같는 애트리뷰트에서만 유효하다.

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

<SCRIPT>
object.endElement();
object.by='150';
object.beginElement();
</SCRIPT>

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

스트립트로 활성 애니메이션의 path 속성으로부터 by 속성값을 변경시키려면 
<SCRIPT>
object.endElement();
object.path=null;
object.by='150';
object.beginElement();
</SCRIPT>

적용
개체scriptHTML규격IE
참조
HTML+time

이 속성은 (영문)SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.


이동 DIV
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<STYLE>.time{ behavior: url(#default#time2);}</STYLE>
</HEAD>
<BODY>
<T:ANIMATE id="aniObj" autoreverse="true" targetElement="divObj" attributeName="left" from="100" by="200" dur="5" fill="hold"/>
<DIV id="divObj" class="time" style="position:relative;top:0;left:0;width:100;padding:9;background-color:yellow;color:red">이동 DIV</DIV>
<BUTTON onclick="aniObj.from=0;aniObj.beginElement()">from=0</BUTTON>
<BUTTON onclick="aniObj.from=50;aniObj.beginElement()">from=50</BUTTON>
<BUTTON onclick="aniObj.from=100;aniObj.beginElement()">from=100</BUTTON>
<BUTTON onclick="aniObj.by=200;aniObj.beginElement()">by=200</BUTTON>
<BUTTON onclick="aniObj.by=300;aniObj.beginElement()">by=300</BUTTON>
<BUTTON onclick="aniObj.by=400;aniObj.beginElement()">by=400</BUTTON>
</BODY>
</HTML>