BY Attribute | by Property

Sets or retrieves a relative offset value for an animation.

Syntax

HTML <ELEMENT BY = vValue... >
Scripting object.by(val) [ = vValue ]

HTML	<ELEMENT BY = vValue... >
Scripting	object.by(val) [ = vValue ]

Possible Values

vValue Variant that specifies or receives the relative value used to animate an element's attribute over time. This is a delta value used to offset the underlying value of the attribute. This value can include any of the following length unit designators: px, in, cm, mm, pt, pc. For more information about the supported length units, see the CSS Length Units Reference.
The property is read/write. The property has no default value.

Remarks

The by property cannot be used on the same element as the to property. If both properties are specified, the by value is ignored. However, specifying a starting value for the animation using the from property is optional.
The by property is only valid for attribute values that support addition.
When writing script to dynamically change the properties of an active animation, developers should consider a couple of issues. Because results might be unpredictable or undefined when you change the properties of an active animation, restart the animation with beginElement after you have made the change. For example:
<SCRIPT>
object.endElement();
object.by='150';
object.beginElement();
</SCRIPT>
For the animate, animateMotion, and animateColor objects, the time2 behavior uses the following model to evaluate which properties to animate.
The path property overrides any setting for the values, from, to, or by properties.
The values property, if specified, overrides any setting for the from, to, or by properties.
The from property is used unless the values or path properties are specified.
The to property, if specified, overrides any setting for the by property.
The by property doesn't override any properties.
To change an active animation from a path to a by value through script:
<SCRIPT>
object.endElement();
object.path=null;
object.by='150';
object.beginElement();
</SCRIPT>

Example

The following example shows how to use the by property to specify the offset of an animation.
<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 AUTOREVERSE="true" targetElement="div1" attributeName="left"
from="100" dur="5" by="200" fill="hold"/>
<DIV id="div1" class="time"
style="position:absolute; top:170; background-color:#003399;color:#FFCC00">
Moving DIV</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 .

Applies To

t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION