---
title: "keyframes"
description: "Creates a [KeyframesSpec] animation, initialized with [init]. For example:


Keyframes can also be associated with a particular [Easing] function:


Values can be animated using arcs of quarter of an Ellipse with [KeyframesSpecConfig.using] and
[ArcMode]:


For a smooth, curvy animation across all the intervals in the keyframes, consider using
[keyframesWithSpline] instead."
type: "function"
---

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


<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
public fun <T> keyframes(init: KeyframesSpecConfig<T>.() -> Unit): KeyframesSpec<T>
```


Creates a `KeyframesSpec` animation, initialized with `init`. For example:


Keyframes can also be associated with a particular `Easing` function:


Values can be animated using arcs of quarter of an Ellipse with `KeyframesSpecConfig.using` and
`ArcMode`:


For a smooth, curvy animation across all the intervals in the keyframes, consider using
`keyframesWithSpline` instead.

#### Parameters

| | |
| --- | --- |
| init | Initialization function for the `KeyframesSpec` animation |




## Code Examples
### FloatKeyframesBuilderInline
```kotlin
fun FloatKeyframesBuilderInline() {
    keyframes {
        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
    }
}
```