CSS - animation-composition

• トップ
• CSSリファレンス
• animation-composition

概要

説明

アニメーション適用前の基盤値と、アニメーション適用後の効果値の合成方法を指定します。

replace

基盤値を効果値で上書きします。基盤値が rotate(30deg)、効果値が rotate(60deg) とすると rotate(60deg) となります。

add

基盤値に効果値を追記します。基盤値が rotate(30deg)、効果値が rotate(60deg) とすると rotate(30deg) rotate(60deg) となります。

accumulate

基盤値と効果値を合算します。基盤値が rotate(30deg)、効果値が rotate(60deg) とすると rotate(90deg) となります。

使用例

@keyframes myframe {
  from { transform: translateY(0px) rotate(-30deg); }  /* 効果値 */
  to   { transform: translateY(50px) rotate(-90deg); } /* 効果値 */
}
.example {
  display: flex;
  .example-box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    .example-item {
      display: inline-block;
      transform: translateY(30px) rotate(-60deg);      /* 基盤値 */
      animation: myframe 3s infinite;      
      border-bottom: 3px solid #f00;
    }
    .ac-replace    { animation-composition: replace; }
    .ac-add        { animation-composition: add; }
    .ac-accumulate { animation-composition: accumulate; }
  }
}

<div class="example">
  <div class="example-box">
    <div class="example-item ac-replace">A</div>
  </div>
  <div class="example-box">
    <div class="example-item ac-add">A</div>
  </div>
  <div class="example-box">
    <div class="example-item ac-accumulate">A</div>
  </div>
</div>

replace の場合、基盤値を効果値が上書きしたアニメーションと同じ動きとなります。

@keyframes myframe {
  from { transform: translateY(0px)  rotate(-30deg); }
  to   { transform: translateY(50px) rotate(-90deg); }
}

add の場合、基盤値の後に効果値を追記したアニメーションと同じ動きとなります。

@keyframes myframe {
  from { transform: translateY(30px) rotate(-60deg) translateY(0px) rotate(-30deg); }
  to   { transform: translateY(30px) rotate(-60deg) translateY(50px) rotate(-90deg); }
}

accumulate の場合、基盤値の値に効果値の値を合算したアニメーションと同じ動きとなります。

@keyframes myframe {
  from { transform: translateY(30px) rotate(-90deg); }
  to   { transform: translateY(80px) rotate(-150deg); }
}

リンク

• https://drafts.csswg.org/css-animations-2/#animation-composition
• https://developer.mozilla.org/ja/docs/Web/CSS/animation-composition
• https://caniuse.com/mdn-css_properties_animation-composition