BY Attribute | by Property

  • Article

Sets or gets a relative offset value by which to animate a color attribute or property with the t:ANIMATECOLOR element.

Syntax

HTML <t:ANIMATECOLOR BY = vValue... >
Scripting [ vValue = ] t:ANIMATECOLOR.by [ = val ]

Possible Values

vValue Variant that specifies or receives the relative value used to animate the color properties of an element. This is a delta value used to offset the underlying value of the attribute or property.

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, you can use from property to specify a starting value for the animation.

The by property is only valid for attribute values that support addition. In the context of t:ANIMATECOLOR, valid attribute values are hexadecimal RGB values or the keywords that represent the values, for example, #8A2BE2 or blueviolet. For more information about supported color values, see the Color Table.

During the course of an animation, you can change the color attribute of the target element by offsetting its value with the value specified for the by property. This offset value is actually the sum of the target element color value and the by property value. Note that if you specify a starting value for the animation target attribute by setting the from property, the end value of the target attribute is the sum of the values set for the from property and the by property.

If the by property is set and the from property is not set, the animation is defined to be additive and overrides the additive property.

When you write script to dynamically change the properties of an active animation, results might be unpredictable or undefined. Restart the animation with beginElement after you change the properties.

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

For the animate object, the animateMotion object, and the animateColor object, the time2 behavior uses the following model to evaluate which properties to animate.

  • The values property, if specified, overrides any setting for the from property, the to property, or the by property.
  • The from property is used, unless the values property or the path property is specified.
  • The to property, if specified, overrides any setting for the by property.
  • The by property doesn't override any properties.

Example

The following example uses an t:ANIMATECOLOR element to animate backgroundColor on a DIV element. The innerDIV backgroundColor is set to #808000 (olive).

The outerDIV backgroundColor is initially set to #FF7F50 (coral). Over the duration of the a1 t:ANIMATECOLOR element, this value is offset by #808000 (olive), the value of the innerDIV backgroundColor. Because the by attribute is additive, the outerDIV backgroundColor is calculated over the duration of the animation as the progressive sum of #FF7F50 (coral) and #808000 (olive). The outerDIV ends the animation with a yellow hue of #FFFF50.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
  <STYLE>
  .time {behavior: url(#default#time2);}
  </STYLE>
  <?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<t:PAR id="p1" dur="15" fill="hold">
    <t:ANIMATECOLOR id="a1" targetElement="outerDIV" 
    attributeName="background-color" by="#808000" begin="1" dur="3" 
    fill="hold"/>
</t:PAR>

<DIV id="outerDIV" class="time" style="FONT-SIZE: 18; LEFT: 58px; WIDTH: 279px; 
POSITION: absolute; TOP: 190px; HEIGHT: 217px; BACKGROUND-COLOR: #ff7f50; 
TEXT-ALIGN: left; border:1px solid black; padding-left:3">outerDIV</DIV>

<DIV id="innerDIV" class="time" style="FONT-SIZE: 18; LEFT: 102px; 
WIDTH: 188px; POSITION: absolute; TOP: 248px; HEIGHT: 98px; 
BACKGROUND-COLOR: #808000; TEXT-ALIGN: left; padding-left:3; 
border:1px solid black;">innerDIV</DIV>

</BODY>
</HTML>

Applies To

t:ANIMATECOLOR

See Also

color, backgroundColor, Introduction to HTML+TIME, Color Table