---
title: "KeyframeAnimationOptions | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface KeyframeAnimationOptions

interface KeyframeAnimationOptions {  
    [composite](#composite)?: [CompositeOperation](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CompositeOperation/);  
    [delay](#delay)?: number;  
    [direction](#direction)?: [PlaybackDirection](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlaybackDirection/);  
    [duration](#duration)?: string | number | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [easing](#easing)?: string;  
    [endDelay](#enddelay)?: number;  
    [fill](#fill)?: [FillMode](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FillMode/);  
    [id](#id)?: string;  
    [iterationComposite](#iterationcomposite)?: [IterationCompositeOperation](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.IterationCompositeOperation/);  
    [iterations](#iterations)?: number;  
    [iterationStart](#iterationstart)?: number;  
    [playbackRate](#playbackrate)?: number;  
    [pseudoElement](#pseudoelement)?: string | null;  
    [rangeEnd](#rangeend)?: string | [TimelineRangeOffset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TimelineRangeOffset/) | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/) | [CSSKeywordValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSKeywordValue/);  
    [rangeStart](#rangestart)?:  
        | string  
        | [TimelineRangeOffset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TimelineRangeOffset/)  
        | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)  
        | [CSSKeywordValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSKeywordValue/);  
    [timeline](#timeline)?: [AnimationTimeline](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationTimeline/)  
    | null;  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.KeyframeAnimationOptions))

-   [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/)
    -   KeyframeAnimationOptions

##### Index

### Properties[](#properties)

[composite?](#composite) [delay?](#delay) [direction?](#direction) [duration?](#duration) [easing?](#easing) [endDelay?](#enddelay) [fill?](#fill) [id?](#id) [iterationComposite?](#iterationcomposite) [iterations?](#iterations) [iterationStart?](#iterationstart) [playbackRate?](#playbackrate) [pseudoElement?](#pseudoelement) [rangeEnd?](#rangeend) [rangeStart?](#rangestart) [timeline?](#timeline)

## Properties[](#properties-1)

### `Optional`composite[](#composite)

composite?: [CompositeOperation](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CompositeOperation/)

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[composite](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#composite)

### `Optional`delay[](#delay)

delay?: number

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[delay](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#delay)

### `Optional`direction[](#direction)

direction?: [PlaybackDirection](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlaybackDirection/)

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[direction](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#direction)

### `Optional`duration[](#duration)

duration?: string | number | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[duration](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#duration)

### `Optional`easing[](#easing)

easing?: string

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[easing](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#easing)

### `Optional`endDelay[](#enddelay)

endDelay?: number

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[endDelay](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#enddelay)

### `Optional`fill[](#fill)

fill?: [FillMode](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FillMode/)

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[fill](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#fill)

### `Optional`id[](#id)

id?: string

### `Optional`iterationComposite[](#iterationcomposite)

iterationComposite?: [IterationCompositeOperation](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.IterationCompositeOperation/)

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[iterationComposite](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#iterationcomposite)

### `Optional`iterations[](#iterations)

iterations?: number

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[iterations](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#iterations)

### `Optional`iterationStart[](#iterationstart)

iterationStart?: number

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[iterationStart](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#iterationstart)

### `Optional`playbackRate[](#playbackrate)

playbackRate?: number

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[playbackRate](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#playbackrate)

### `Optional`pseudoElement[](#pseudoelement)

pseudoElement?: string | null

Inherited from [KeyframeEffectOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/).[pseudoElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyframeEffectOptions/#pseudoelement)

### `Optional`rangeEnd[](#rangeend)

rangeEnd?: string | [TimelineRangeOffset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TimelineRangeOffset/) | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/) | [CSSKeywordValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSKeywordValue/)

### `Optional`rangeStart[](#rangestart)

rangeStart?: string | [TimelineRangeOffset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TimelineRangeOffset/) | [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/) | [CSSKeywordValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSKeywordValue/)

### `Optional`timeline[](#timeline)

timeline?: [AnimationTimeline](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationTimeline/) | null