---
title: "KeyframesSpec"
description: "[KeyframesSpec] creates a [VectorizedKeyframesSpec] animation.

[VectorizedKeyframesSpec] animates based on the values defined at different timestamps in the
duration of the animation (i.e. different keyframes). Each keyframe can be defined using
[KeyframesSpecConfig.at]. [VectorizedKeyframesSpec] allows very specific animation definitions
with a precision to millisecond.


For each interval, you may provide a custom [Easing] by use of the [KeyframesSpecConfig.using]
function.


By default, values are animated linearly from one interval to the next (similar to [tween]),
however for 2-dimensional values you may animate them using arcs of quarter of an Ellipse with
[KeyframesSpecConfig.using] and [ArcMode]:


If instead, you wish to have a smooth curvy animation across all intervals, consider using
[KeyframesWithSplineSpec]."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
public class KeyframesSpec<T>(public val config: KeyframesSpecConfig<T>) :
    DurationBasedAnimationSpec<T>
```


`KeyframesSpec` creates a `VectorizedKeyframesSpec` animation.

`VectorizedKeyframesSpec` animates based on the values defined at different timestamps in the
duration of the animation (i.e. different keyframes). Each keyframe can be defined using
`KeyframesSpecConfig.at`. `VectorizedKeyframesSpec` allows very specific animation definitions
with a precision to millisecond.


For each interval, you may provide a custom `Easing` by use of the `KeyframesSpecConfig.using`
function.


By default, values are animated linearly from one interval to the next (similar to `tween`),
however for 2-dimensional values you may animate them using arcs of quarter of an Ellipse with
`KeyframesSpecConfig.using` and `ArcMode`:


If instead, you wish to have a smooth curvy animation across all intervals, consider using
`KeyframesWithSplineSpec`.



## Code Examples

### FloatKeyframesBuilder
```kotlin
fun FloatKeyframesBuilder() {
    KeyframesSpec(
        KeyframesSpec.KeyframesSpecConfig<Float>().apply {
            0f at 0 // ms  // Optional
            0.4f at 75 // ms
            0.4f at 225 // ms
            0f at 375 // ms  // Optional
            durationMillis = 375
        }
    )
}
```

### KeyframesBuilderWithEasing
```kotlin
fun KeyframesBuilderWithEasing() {
    // Use FastOutSlowInEasing for the interval from 0 to 50 ms, and LinearOutSlowInEasing for the
    // time between 50 and 100ms
    keyframes<Float> {
        durationMillis = 100
        0f at 0 using FastOutSlowInEasing
        1.5f at 50 using LinearOutSlowInEasing
        1f at 100
    }
}
```

### OffsetKeyframesWithArcsBuilder
```kotlin
fun OffsetKeyframesWithArcsBuilder() {
    keyframes<Offset> {
        // Animate for 1.2 seconds
        durationMillis = 1200
        // Animate to Offset(100f, 100f) at 50% of the animation using LinearEasing then, animate
        // using ArcAbove for the rest of the animation
        Offset(100f, 100f) atFraction 0.5f using LinearEasing using ArcAbove
    }
}
```