KeyTime Structure
During the relative course of an animation, a KeyTime instance specifies the precise timing when a particular key frame should take place.
Assembly: PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
[TypeConverterAttribute(typeof(KeyTimeConverter))] public value class KeyTime : IEquatable<KeyTime>
<object property="[days.]hours:minutes:seconds[.fractionalSeconds]"/>- or -<object property="[days.]hours:minutes"/>- or -<object property="pctValue%"/>- or -<object property="Uniform"/>- or -<object property="Paced"/>
XAML Values
The KeyTime type exposes the following members.
| Name | Description | |
|---|---|---|
![]() ![]() | Paced | Gets the Paced value which creates timing behavior resulting in an animation that interpolates at a constant rate. |
![]() | Percent | Gets the time when the key frame ends expressed as a percentage of the total duration of the animation. |
![]() | TimeSpan | Gets the time when the key frame ends expressed as a time relative to the beginning of the animation. |
![]() | Type | Gets the Type value this instance represents. |
![]() ![]() | Uniform | Gets the Uniform value which divides the allotted time of the animation evenly between key frames. |
| Name | Description | |
|---|---|---|
![]() | Equals(KeyTime) | Indicates whether this instance is equal to the specified KeyTime. |
![]() | Equals(Object) | Indicates whether this instance equals the specified object. (Overrides ValueType::Equals(Object).) |
![]() ![]() | Equals(KeyTime, KeyTime) | Indicates whether the two specified KeyTime structures are equal. |
![]() | Finalize | Allows an object to try to free resources and perform other cleanup operations before it is reclaimed by garbage collection. (Inherited from Object.) |
![]() ![]() | FromPercent | Creates a new KeyTime instance, with the KeyTimeType property initialized to the value of the specified parameter. |
![]() ![]() | FromTimeSpan | Creates a new KeyTime instance, with the KeyTimeType property initialized to the value of the specified parameter. |
![]() | GetHashCode | Returns an integer hash code representing this instance. (Overrides ValueType::GetHashCode().) |
![]() | GetType | Gets the Type of the current instance. (Inherited from Object.) |
![]() | MemberwiseClone | Creates a shallow copy of the current Object. (Inherited from Object.) |
![]() | ToString | Returns a string representing this KeyTime instance. (Overrides ValueType::ToString().) |
| Name | Description | |
|---|---|---|
![]() ![]() | Equality | Overloaded operator that compares two KeyTime structures for equality. |
![]() ![]() | Implicit(TimeSpan to KeyTime) | Overloaded operator that implicitly converts a TimeSpan to a KeyTime. |
![]() ![]() | Inequality | Overloaded operator that compares two KeyTime structures for inequality. |
Each key frame's KeyTime specifies when that key frame ends. It does not specify how long the key time 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. See Key-Frame Animations Overview for more information.
A KeyTime may be expressed in several different formats, including a numeric time value, as a percentage, or as one of the special sentinel values Uniform or Paced.
This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a Duration property. In addition to specifying the duration of an animation, you need to specify what part of that duration is allotted to each of its key frames. To allot the time, you specify a KeyTime for each key frame in the animation.
The KeyTime for each key frame specifies when a key frame ends (it does not specify the length of time a key frame plays). You can specify a KeyTime as a TimeSpan value, as a percentage, or as the Uniform or Paced special value.
The following example uses a DoubleAnimationUsingKeyFrames to animate a rectangle across the screen. The key frames' key times are set with TimeSpan values.
<!-- This Rectangle is animated with KeyTimes using TimeSpan Values. It moves horizontally to 100 in the first 3 seconds, 100 to 300 in the next second, and 300 to 500 in the last 6 seconds. --> <Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:Name="TranslateTransform1" /> </Rectangle.RenderTransform> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TranslateTransform1" Storyboard.TargetProperty="X" Duration="0:0:10"> <!-- These KeyTime properties are specified as TimeSpan values which are in the form of "hours:minutes:seconds". --> <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" /> <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" /> <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>
The following illustration shows when the value of each key frame is reached.

The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.
<!-- This rectangle moves horizontally to 100 in the first 3 seconds, 100 to 300 in the next second, and 300 to 500 in the last 6 seconds.--> <Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:Name="TranslateTransform2" /> </Rectangle.RenderTransform> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TranslateTransform2" Storyboard.TargetProperty="X" Duration="0:0:10"> <!-- KeyTime properties are expressed as Percentages. --> <LinearDoubleKeyFrame Value="100" KeyTime="30%" /> <LinearDoubleKeyFrame Value="300" KeyTime="40%" /> <LinearDoubleKeyFrame Value="500" KeyTime="100%" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>
The following illustration shows when the value of each key frame is reached.

The next example uses Uniform key time values.
<!-- This rectangle is animated with KeyTimes using Uniform values. Goes to 100 in the first 3.3 seconds, 100 to 300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. --> <Rectangle Fill="Red" Stroke="Black" StrokeThickness="5" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:Name="TranslateTransform3" /> </Rectangle.RenderTransform> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TranslateTransform3" Storyboard.TargetProperty="X" Duration="0:0:10"> <!-- KeyTime properties are expressed with values of Uniform. When a key time is set to "Uniform" the total allotted time of the animation is divided evenly between key frames. In this example, the total duration of the animation is ten seconds and there are four key frames each of which are set to "Uniform", therefore, the duration of each key frame is 3.3 seconds (10/3). --> <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" /> <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" /> <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>
The following illustration shows when the value of each key frame is reached.

The final example uses Paced key time values.
<!-- This rectangle is animated with KeyTimes using Paced Values. The rectangle moves between key frames at uniform rate except for first key frame because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero. --> <Rectangle Fill="Orange" Stroke="Black" StrokeThickness="5" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:Name="TranslateTransform4" /> </Rectangle.RenderTransform> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TranslateTransform4" Storyboard.TargetProperty="X" Duration="0:0:10"> <!-- Use Paced values when a constant rate is desired. The time allocated to a key frame with a KeyTime of "Paced" is determined by the time allocated to the other key frames of the animation. This time is calculated to attempt to give a "paced" or "constant velocity" for the animation. --> <LinearDoubleKeyFrame Value="100" KeyTime="Paced" /> <LinearDoubleKeyFrame Value="300" KeyTime="Paced" /> <LinearDoubleKeyFrame Value="500" KeyTime="Paced" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>
The following illustration shows when the value of each key frame is reached.

For simplicity, the code versions of this example use local animations, not storyboards, because only a single animation is being applied to a single property, but the examples may be modified to use storyboards instead. For an example showing how to declare a storyboard in code, see How to: Animate a Property by Using a Storyboard.
For the complete sample, see KeyFrame Animation Sample. For more information about key frame animations, see the Key-Frame Animations Overview.
More Code
| How to: Animate Color by Using Key Frames | This example shows how to animate the Color of a SolidColorBrush by using key frames. |
| How to: Animate the Thickness of a Border by Using Key Frames | This example shows how to animate the BorderThickness property of a Border. |
Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2
The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.
