Partager via

FROM Attribute | from Property

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Sets or gets the starting value of an animation.

Syntax

HTML <ELEMENT FROM = vValue... >
Scripting [ vValue = ] object.from [ = vValue ]

Possible Values

vValue Variant that specifies or receives the starting value of the animation. This value can include any of the following length unit designators: px, in, cm, mm, pt, or 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

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

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. The following example shows how to use beginElement.

<SCRIPT>
object.endElement();
object.from='100px';
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 path property overrides any setting for the values property, the from property, the to property, or the by property.
  • 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.

The following example uses script to change an active animation from a path value to a from value.

<SCRIPT>
object.endElement();
object.path=null;
object.from='100px';
object.beginElement();
</SCRIPT>

Example

This example uses the from property to set the starting value of the 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>

<!-- The ANIMATE element that facilitates animation of the DIV. -->
<t:ANIMATE ID="oAnim" AUTOREVERSE="true" begin="2" targetElement="div1" 
attributeName="left" from="100px" dur="5" to="200px" fill="hold"/>
<!-- The DIV that is being animated -->
<DIV id="div1" class="time" 
style="position:absolute;left:0px; top:170px; background-color:#003399;color:#FFCC00">
Moving DIV</DIV>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/from.htm

Applies To

t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION

See Also

Introduction to HTML+TIME, by, to