Key​Time Key​Time Key​Time Key​Time Struct


Specifies when a particular key frame should take place during an animation.

public : struct KeyTimepublic struct KeyTimePublic Structure KeyTime// This API is not available in Javascript.
<object property="[days.]hours:minutes:seconds[.fractionalSeconds]"/>
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)


This example uses XAML attribute syntax to set KeyTime values on several types of DoubleAnimationUsingKeyFrames classes.

        <Storyboard x:Name="myStoryboard">

            <!-- Animate the TranslateTransform's X property
           from 0 to 350, then 50, then 200 over 10 seconds. -->
       Duration="0:0:10" EnableDependentAnimation="True">

                <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
           steadily from its starting position to 500 over 
           the first 3 seconds.  -->
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />

                <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
           appears at 400 after the fourth second of the animation. -->
                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

                <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
           back to its starting point. The animation starts out slowly at 
           first and then speeds up. This KeyFrame ends after the 6th
           second. -->
                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />


    <Rectangle PointerPressed="Pointer_Clicked" Fill="Blue"
 Width="50" Height="50">
            <TranslateTransform x:Name="MyAnimatedTranslateTransform" />

// Start the animation when the object loads
private void Start_Animation(object sender, RoutedEventArgs e)
' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
End Sub


Each key frame's KeyTime property specifies when that key frame ends. It does not specify how long the key frame plays. The amount of time a key frame plays is determined by when the key frame ends, when the previous key frame ended, and the animation's duration.

Specifying a KeyTime by only an integer without any time span literal characters such as : or . will result in a KeyTime of that number of days! This is seldom the intended result. Usually you specify time spans in seconds. Thus the KeyTime string typically includes preceding zero values for hours and minutes, along with the literal : as separator between hours, minutes, and seconds. For example, to specify a KeyTime of five seconds, the correct string is "0:0:5" ("0:0:05" is equivalent).

Notes on XAML syntax

You cannot declare a KeyTime as a shareable object in a ResourceDictionary.

Projection and members of KeyTime

If you are using a Microsoft .NET language (C# or Microsoft Visual Basic), or Visual C++ component extensions (C++/CX), then KeyTime has some utility methods, and its data member TimeSpan is exposed as a read-only property, not a field.

For Microsoft .NET, Duration exposes TimeSpan.Parse for its TimeSpan, a FromTimeSpan method, and an Implicit operator. These aren't available from the structure in Visual C++ component extensions (C++/CX) but you can use KeyTimeHelper.FromTimeSpan.

If you are programming with C++ using the Windows Runtime Template Library (WRL), then only the data member field TimeSpan exists as a member of KeyTime. WRL code can access FromTimeSpan as it exists on the KeyTimeHelper class.


TimeSpan TimeSpan TimeSpan TimeSpan

The time component of this KeyTime.

public : field TimeSpan TimeSpanpublic field TimeSpan TimeSpanPublic Field TimeSpan// This API is not available in Javascript.