| 属性名 | animation-composition |
|---|---|
| 値 | [replace | add | accumulate]# |
| 初期値 | replace |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_animation-composition |
アニメーション適用前の基盤値と、アニメーション適用後の効果値の合成方法を指定します。
@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); }
}