FROM Attribute | from Property

  • Article

Sets or gets the starting value of a color attribute or property animated by t:ANIMATECOLOR.

Syntax

HTML <t:ANIMATECOLOR FROM = vValue... >
Scripting [ vValue = ] t:ANIMATECOLOR.from [ = val ]

Possible Values

vValue Variant that specifies or receives the starting value of the animation. This value supersedes the underlying value of the attribute or property.

The property is read/write. The property has no default value.

Remarks

If a from value is not specified, the animation uses the target attribute value at the time the animation is started.

In the context of t:ANIMATECOLOR, valid attribute values are hexadecimal RGB values or the keywords that represent them (for example, #8A2BE2 or blueviolet). For more information about supported color values, see the Color Table.

When writing script to dynamically change the properties of an active animation, the results might be unpredictable or undefined. Restart the animation with beginElement after you change the properties. The following example shows how to use beginElement.

<SCRIPT>
object.endElement();
object.from='#7FFFD4';
object.beginElement();
</SCRIPT>

For the animate object, theanimateMotion 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 proerpty 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 two t:ANIMATECOLOR elements to animate the backgroundColor of two DIV elements: outerDIV and innerDIV. The innerDIV begins with its backgroundColor set to yellow, which is animated to red over a five-second duration. The outerDIV is animated from red to yellow over the same duration.

The Show Me example provides several colored buttons. By clicking a button, you set the from attribute of the innerDIV animation element to that button's color value, and set the to attribute of the outerDIV animation element.

<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" begin="0" dur="15" fill="hold">
    <t:ANIMATECOLOR id="a1" attributeName="background-color" from="red" to="
    yellow" targetElement="outerDIV" begin="0" dur="5" fill="hold"/>
    
    <t:ANIMATECOLOR id="a2" attributeName="background-color" from="yellow" 
    to="red" targetElement="innerDIV" to="#0000FF" begin="0" dur="5" 
    fill="hold"/>
</t:PAR>

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

<DIV id="innerDIV" class="time" style="FONT-SIZE: 18px; LEFT: 162px; 
WIDTH: 188px; POSITION: absolute; TOP: 298px; HEIGHT: 98px; 
BACKGROUND-COLOR: yellow; TEXT-ALIGN: left; padding-left:3">innerDIV</DIV>
</BODY>
</HTML>

Applies To

t:ANIMATECOLOR

See Also

Introduction to HTML+TIME, Color Table