概要

CSSのanimation-compositionプロパティは、複数のアニメーションが重なった際に、どのようにアニメーションの効果が合成されるかを制御するために使用されます。このプロパティを利用することで、同じ要素に適用されたアニメーションがどのように動作するかを調整でき、より細かいアニメーションのカスタマイズが可能になります。

animation-compositionの基本的な使い方

animation-compositionプロパティを使用すると、同じ要素に複数のアニメーションが適用された際に、そのアニメーション同士の合成方法を設定できます。従来のアニメーションでは、同じプロパティに異なるアニメーションが適用されると予期しない挙動になることがありますが、このプロパティを活用することでその制御が可能になります。

.element {
    animation: move 2s infinite, scale 1s infinite;
    animation-composition: add; /* アニメーションの効果を加算する */
}

この例では、.elementに適用された2つのアニメーション（移動とスケール）が合成され、期待通りの動作を実現します。

animation-compositionの値

animation-compositionには以下の値があります。それぞれの値がどのようにアニメーションの合成方法に影響するかを説明します。

replace

デフォルトの設定で、既存のアニメーションを新しいアニメーションで置き換えます。同じプロパティに対して異なるアニメーションが適用された場合、最後に適用されたアニメーションだけが実行されます。

.element {
    animation: move 2s infinite, scale 1s infinite;
    animation-composition: replace;
}

add

複数のアニメーションの効果を加算します。例えば、translateXとtranslateYのアニメーションが別々に適用されている場合、両方の効果が同時に適用されます。

.element {
    animation: move 2s infinite, scale 1s infinite;
    animation-composition: add;
}

accumulate

アニメーションの値を累積して適用します。例えば、同じプロパティに複数のアニメーションが影響を与える場合、その効果が累積して加算されます。

.element {
    animation: move 2s infinite, rotate 1s infinite;
    animation-composition: accumulate;
}

使用例

アニメーションの合成方法を変更する例

以下の例では、animation-composition: add;を使用して、複数のアニメーションを合成し、異なる動作を実現しています。

<div class="animated-element"></div>
<style>
@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
    }
}
.animated-element {
    width: 100px;
    height: 100px;
    background-color: coral;
    animation: move 3s infinite, scale 3s infinite;
    animation-composition: add; /* 両方のアニメーション効果を加算 */
}
</style>

この例では、moveとscaleのアニメーションが同時に適用され、それぞれの効果が合成されて要素が移動しながら拡大します。

アニメーションの効果を累積させる

animation-composition: accumulate;を使って、複数のアニメーションの効果を累積させます。これにより、複数回のアニメーションが重なって適用されます。

<div class="rotate-element"></div>
<style>
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes move-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}
.rotate-element {
    width: 50px;
    height: 50px;
    background-color: lightgreen;
    animation: rotate 2s infinite, move-right 2s infinite;
    animation-composition: accumulate; /* アニメーション効果を累積 */
}
</style>

この例では、回転と移動が累積的に適用され、要素が回転しながら右に移動します。

注意点

• animation-compositionは、複数のアニメーションが同じプロパティに影響を与えるときに特に有用ですが、誤用するとアニメーションが意図しない動きをする可能性があります。合成の挙動を十分に理解して使いましょう。
• 一部の古いブラウザではanimation-compositionがサポートされていない可能性があります。使用する際は、最新のブラウザ環境での互換性を確認してください。
• このプロパティは、アニメーションの複雑な制御を行うためのものであるため、必要な場合にのみ使用し、基本的なアニメーションの実装においてはシンプルな方法を心掛けるとよいでしょう。

まとめ

animation-compositionプロパティは、CSSアニメーションの合成方法を制御するための強力なツールです。これを活用することで、複数のアニメーションを同時に適用し、期待通りの動作を実現することが可能になります。複雑なアニメーション効果を作り出す際に非常に有用なプロパティですので、ぜひ試してみてください。