---
title: "Keyframe easing animated icon"
description: "Keyframe easing animated icon (Motion design). A linear keyframe is eased. Light: the diamond's straight sides are pulled in to the hourglass of an eased key, pinching just past it with a dead stop and settling once. Strong: the key first bows out (the sides bulge as the corners are grabbed), then snaps into the hourglass, pinching well past it, and settles in two decaying beats. The reverse eases it back to linear."
canonical: https://generativeicons.com/icons/keyframe-easing/
---

# Keyframe easing animated icon

A linear keyframe is eased. Light: the diamond's straight sides are pulled in to the hourglass of an eased key, pinching just past it with a dead stop and settling once. Strong: the key first bows out (the sides bulge as the corners are grabbed), then snaps into the hourglass, pinching well past it, and settles in two decaying beats. The reverse eases it back to linear.

- Id: `keyframe-easing`
- Category: Motion design
- Search terms: ease, ease in, ease out, ease in out, easy ease, eased keyframe, smooth keyframe, keyframe interpolation, hourglass keyframe, f9
- Two states: linear to eased, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/keyframe-easing.lottie (dotLottie, 5625 bytes, sha256 47f1af4360683362261f0a4345ab5107feb05c6f2f0ffede2d6fc2201b9ec486)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add keyframe-easing
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/keyframe-easing.mjs';

export function KeyframeEasingIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/keyframe-easing.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/keyframe-easing/ · https://generativeicons.com/api/icons/keyframe-easing