CSS3

：

プロパティ

：

animation-composition

　 編集：2022.07.14 by T.A.

→●、mdn

複数のアニメーション時の組成演算型。

名前 animation-composition
値 <single-animation-composition>#
初期値 replace
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 指定された一連のキーワードからなるリスト
正準的順序 文法に従う
アニメーション型 not animatable

animation-composition プロパティは、複数のアニメーションが、同じプロパティに同時に影響する場合に利用される組成演算型を定義する。

以下のCSSが組み込んであります：

<single-animation-composition>
＝replace | add | accumulate
replace
Web Animations に定義される組成演算型： 置換型と同じとする。[WEB-ANIMATIONS]
add
Web Animations に定義される組成演算型： 加算型と同じとする。[WEB-ANIMATIONS]
accumulate
Web Animations に定義される組成演算型： 累積型と同じとする。[WEB-ANIMATIONS]

keyframe 内に指定された animation-composition は、その keyframe 内に指定された各プロパティ用に ― 各プロパティごとに、それを指定している次の keyframe まで ― 利用する組成演算を定義する。

例えば、次のスタイルシートは、scale プロパティをターゲットにする 2 個の異なるアニメーションを定義している。 

@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

これら 2 個のアニメーションが同じ要素に適用された場合、通常は片方のアニメーションだけ適用されることになるが、2 個目のアニメーション上の animation-composition に add を指定した場合、この 2 個のアニメーションは結合されることになる。

CSS 遷移 [CSS3-TRANSITIONS] の組成順序は、CSS アニメーションより前なので、次の例のように animation-composition を利用して、CSS アニメーションと下層の遷移とを結合することも可能になる： 

.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}

¶課題を省く

¶例が具体的でない。

テスト
HTML：

ここに表示
HTML：

ここに表示
¶[Edge]不明
スクリプト：


スクリプト：



表示内容：
表示内容：