# KeyframesSpec.KeyframesSpecConfig

Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+class:androidx.compose.animation.core.KeyframesSpec.KeyframesSpecConfig) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/All
- Cmn

  ```
  class KeyframesSpec.KeyframesSpecConfig<T : Any?> : KeyframesSpecBaseConfig<T, KeyframesSpec.KeyframeEntity<T>>
  ```

|---|---|---|
| [kotlin.Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html) |||
| ↳ | [androidx.compose.animation.core.KeyframesSpecBaseConfig](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig)\<T, [KeyframesSpec.KeyframeEntity](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity)\<T\>\> ||
|   | ↳ | [androidx.compose.animation.core.KeyframesSpec.KeyframesSpecConfig](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig) |

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig` stores a mutable configuration of the key frames, including `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#durationMillis()`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#delayMillis()`, and all the key frames. Each key frame defines what the animation value should be at a particular time. Once the key frames are fully configured, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig` can be used to create a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec`.

```kotlin
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.keyframes
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

// Use FastOutSlowInEasing for the interval from 0 to 50 ms, and LinearOutSlowInEasing for the
// time between 50 and 100ms
keyframes<DpOffset> {
    durationMillis = 200
    DpOffset(0.dp, 0.dp) at 0 using LinearEasing
    DpOffset(500.dp, 100.dp) at 100 using LinearOutSlowInEasing
    DpOffset(400.dp, 50.dp) at 150
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#keyframes()` |   |

## Summary

| ### Public constructors |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#KeyframesSpecConfig()()` | Cmn |

| ### Public functions |
|---|---|---|
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` | `T.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(kotlin.Any).at(kotlin.Int)(timeStamp: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Adds a keyframe so that animation value will be `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig` at time: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(kotlin.Any).at(kotlin.Int)`. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` | `T.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(kotlin.Any).atFraction(kotlin.Float)(fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Adds a keyframe so that the animation value will be the value specified at a fraction of the total `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#durationMillis()` set. | Cmn |
| `infix https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).using(androidx.compose.animation.core.ArcMode)(arcMode: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/ArcMode)` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/ArcMode` applied from this keyframe to the next. | Cmn |
| `infix https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>.[with](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).with(androidx.compose.animation.core.Easing))(easing: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing)` **This function is deprecated.** Use version that returns an instance of the entity so it can be re-used in other keyframe builders. | Cmn |

### Inherited functions

From [androidx.compose.animation.core.KeyframesSpecBaseConfig](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig) `infix https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#(androidx.compose.animation.core.KeyframeBaseEntity).using(androidx.compose.animation.core.Easing)(easing: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing)`

Adds an `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` for the interval started with the just provided timestamp.
Cmn

### Inherited properties

From [androidx.compose.animation.core.KeyframesSpecBaseConfig](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#delayMillis()`

The amount of time that the animation should be delayed.
Cmn `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#durationMillis()`

Duration of the animation in milliseconds.
Cmn

## Public constructors

### KeyframesSpecConfig

Cmn

```
<T : Any?> KeyframesSpecConfig()
```

## Public functions

### T.at

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+function:at) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
open infix fun T.at(timeStamp: @IntRange(from = 0) Int): KeyframesSpec.KeyframeEntity<T>
```

Adds a keyframe so that animation value will be `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig` at time: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(kotlin.Any).at(kotlin.Int)`. For example: 0.8f at 150 // ms

| Parameters |
|---|---|
| `timeStamp: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The time in the during when animation should reach value: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig`, with a minimum value of `0`. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` | an `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity` so a custom `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` can be added by `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).with(androidx.compose.animation.core.Easing)` method. |

### T.atFraction

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+function:atFraction) Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.3.0)

```
open infix fun T.atFraction(fraction: @FloatRange(from = 0.0, to = 1.0) Float): KeyframesSpec.KeyframeEntity<T>
```

Adds a keyframe so that the animation value will be the value specified at a fraction of the total `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#durationMillis()` set. For example: 0.8f atFraction 0.50f // half of the overall duration set

| Parameters |
|---|---|
| `fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The fraction when the animation should reach specified value. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>` | an `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity` so a custom `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` can be added by `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).with(androidx.compose.animation.core.Easing)` method |

### KeyframesSpec.KeyframeEntity.using

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+function:using) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
infix fun KeyframesSpec.KeyframeEntity<T>.using(arcMode: ArcMode): KeyframesSpec.KeyframeEntity<T>
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/ArcMode` applied from this keyframe to the next.

Note that arc modes are meant for objects with even dimensions (such as `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset` and its variants). Where each value pair is animated as an arc. So, if the object has odd dimensions the last value will always animate linearly.

The order of each value in an object with multiple dimensions is given by the applied vector converter in `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec#vectorize(androidx.compose.animation.core.TwoWayConverter)`.

E.g.: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#RectToVector()` assigns its values as `[left, top, right, bottom]` so the pairs of dimensions animated as arcs are: `[left, top]` and `[right, bottom]`.

### KeyframesSpec.KeyframeEntity.with

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+function:with) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Deprecated in [1.6.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.6.0)

```
infix fun KeyframesSpec.KeyframeEntity<T>.[with](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).with(androidx.compose.animation.core.Easing))(easing: Easing): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use version that returns an instance of the entity so it can be re-used in other keyframe builders, use this instead:
>
> ```kotlin
> this using easing
> ```

Adds an `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` for the interval started with the just provided timestamp. For example: 0f at 50 with LinearEasing

```kotlin
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.keyframes

// 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
}
```

| Parameters |
|---|---|
| `easing: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` to be used for the next interval. |

| Returns |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity` instance so that other implementations can expand on the builder pattern |