---
url: "/ja/bannerify/animation/editing-keyframe-properties.md"
description: "キーフレームのX、Y、Scale、Rotation、Opacityの各プロパティを設定します。"
---

# キーフレームのプロパティを編集する

> キーフレームのX、Y、Scale、Rotation、Opacityの各プロパティを設定します。

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

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

[Video](/assets/videos/bannerify/animation/editing-properties.mp4)

アニメーションのどのキーフレームでも、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その差分が自動でアニメーションになります。たとえば、0%のキーフレームでスケールを2xに、100%のキーフレームでスケールを1xに設定すると、「縮小」するアニメーションが自動で作られます。

- **X**プロパティは、要素の左右の位置（ピクセル単位）をアニメーションさせます。
- **Y**プロパティは、要素の上下の位置（ピクセル単位）をアニメーションさせます。
- **Opacity**プロパティは、要素の透明度（パーセンテージ）をアニメーションさせます。
- **Rotate**プロパティは、要素の回転角度をアニメーションさせます。
- **Scale**プロパティは、要素のサイズをアニメーションさせます。

## パーセンテージによる相対的なX/Y変形を使う {#using-percentage-based-relative-x-y-transforms}

アニメーションさせる要素に対するパーセンテージでX/Yの位置を設定したい場合は、キーフレームのプロパティで**Position**の単位を**px**から **%** に切り替えます。これで、X/Yの値をピクセルではなくパーセンテージで設定できます。

X/Yの変形値をパーセンテージで指定すると、アニメーションを適用した要素の位置を基準に、そのサイズに対するパーセンテージで変形が自動的にアニメーションされます。たとえば、キーフレームでXの変形値を`10%`に設定すると、幅`100px`のレイヤーは`10px`動きます。同じ`10%`のXの変形値を持つアニメーションを幅`200px`のレイヤーに適用すると、レイヤーは`20px`動きます。

## スケールをX/Yに分けて設定する {#splitting-scale-into-x-y-scale-options}

X軸とY軸のスケールをそれぞれ個別に設定したい場合は、キーフレームのプロパティで**Scale**のモードを**Uniform**から**X / Y**に切り替えます。これで、両方を同じ比率で拡大・縮小するのではなく、キーフレームの横方向と縦方向の「Scale」の値を別々に設定できます。

この設定は、もう一方の軸に影響を与えずに、レイヤーの幅や高さだけをアニメーションさせたい場合に便利です。