---
url: "/ja/bannerify/animation/animation-easing.md"
description: "イージングカーブを選んで、カスタムアニメーションの動きの緩急を調整します。"
---

# アニメーションのイージングを設定する

> イージングカーブを選んで、カスタムアニメーションの動きの緩急を調整します。

### 動画チュートリアル：Figmaのバナーデザインにカスタムアニメーションを追加する

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

[Video](/assets/videos/bannerify/animation/changing-easing.mp4)

**Easing**メニューから項目を選ぶと、アニメーションに付けるイージングの種類を選べます。イージングはタイムライン全体に自動で適用され、**Live preview**エリアも更新されるので、選んだイージングでキーフレームアニメーションの動きがどう変わるかを確認できます。

選べるイージングは次のとおりです。

- Ease (Default)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate

## カスタムのCubic Bezierイージングを設定する {#setting-a-custom-cubic-bezier-easing-value}

### 動画チュートリアル：Figmaでバナーアニメーションにcubic-bezierイージングを追加する

Bannerifyプラグインを使って、Figmaのバナーアニメーションにカスタムのcubic-bezierイージングを追加する方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw)

独自のカーブを使うには、**Easing**メニューでカーブのハンドルをドラッグするか、プリセットの下にあるフィールドに有効なCSSのcubic-bezierの値（例：`cubic-bezier(0.65,0.05,0.36,1);`）を貼り付けます。カスタムのcubic-bezierカーブは、[https://easings.co/](https://easings.co/)のようなサイトや、CSSのcubic-bezierカーブを生成できるお好みのWebサービスを使って作成できます。