---
title: "KeyframeEffectOptions | 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 KeyframeEffectOptions

interface KeyframeEffectOptions {  
    [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/);  
    [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;  
}

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

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

##### Index

### Properties[](#properties)

[composite?](#composite) [delay?](#delay) [direction?](#direction) [duration?](#duration) [easing?](#easing) [endDelay?](#enddelay) [fill?](#fill) [iterationComposite?](#iterationcomposite) [iterations?](#iterations) [iterationStart?](#iterationstart) [playbackRate?](#playbackrate) [pseudoElement?](#pseudoelement)

## Properties[](#properties-1)

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

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

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

delay?: number

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

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

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

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

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

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

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

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

easing?: string

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

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

endDelay?: number

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

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

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

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

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

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

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

iterations?: number

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

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

iterationStart?: number

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

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

playbackRate?: number

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

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

pseudoElement?: string | null