CSS - animation-composition 属性

CSS 属性 animation-composition 定义当多个动画同时作用于同一属性时要应用的复合操作。

在 CSS 动画中，@keyframes 所针对的属性具有关联的效果堆栈。
效果堆栈的值是 CSS 样式规则中的基础属性值与关键帧中属性的效果值组合的结果。
animation-composition 属性定义为特定属性组合这些值的方法。

可能的值

replace - 默认值是效果值，该值优先于属性的基础值。
add - 效果值通过加法操作增加现有属性值。对于 add 操作不可交换的动画类型，操作数的顺序是基值后跟效果值。
accumulate - 效果和基础值合并。在加法运算不可交换的动画类型中，操作数的顺序是基值后跟效果值。

语法


animation-composition = <single-animation-composition># 	

<single-animation-composition> = replace | add | accumulate

适用对象

所有 HTML 元素。

CSS animation-composition - 替换 Value

以下示例演示了 value replace 在 animation-composition 中的用法。替换合成（#replace-demo）会导致框在每次动画迭代开始时重置为其起始位置，并完全替换之前的状态。


<html>
<head>
<style>
	 	@keyframes moveRight {
	 	 	 0%, 100% {
	 	 	 transform: translateX(0);
	 	 	 background-color: lightblue;
	 	 	 }
	 	 	 50% {
	 	 	 transform: translateX(100px);
	 	 	 background-color: lightcoral;
	 	 	 }
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 20px;
	 	 	 display: inline-block;
	 	 	 animation-duration: 2s;
	 	 	 animation-iteration-count: infinite;
	 	 	 border: 2px solid #333;
	 	}
	 	#replace-demo {
	 	 	 animation-name: moveRight;
	 	 	 animation-composition: replace;
	 	}
	 	.container {
	 	 	 text-align: center;
	 	 	 margin-top: 50px;
	 	}
	 	.label {
	 	 	 font-weight: bold;
	 	 	 margin-bottom: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="label">Replace Composition</div>
	 	 	 <div class="box" id="replace-demo"></div>
	 	</div>
</body>
</html>

CSS animation-composition - 添加值

以下示例演示了 animation-composition 中 add value 的用法。添加合成（#add-demo）会导致一种加法效果，在该效果中，随着移动的累积，框在每次迭代中进一步向右移动。


<html>
<head>
<style>
	 	@keyframes moveRight {
	 	 	 0%, 100% {
	 	 	 transform: translateX(0);
	 	 	 background-color: lightblue;
	 	 	 }
	 	 	 50% {
	 	 	 transform: translateX(100px);
	 	 	 background-color: lightcoral;
	 	 	 }
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 20px;
	 	 	 display: inline-block;
	 	 	 animation-duration: 2s;
	 	 	 animation-iteration-count: infinite;
	 	 	 border: 2px solid #333;
	 	}
	 	#add-demo {
	 	 	 animation-name: moveRight;
	 	 	 animation-composition: add;
	 	}
	 	.container {
	 	 	 text-align: center;
	 	 	 margin-top: 50px;
	 	}
	 	.label {
	 	 	 font-weight: bold;
	 	 	 margin-bottom: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="label">Add Composition</div>
	 	 	 <div class="box" id="add-demo"></div>
	 	</div>
</body>
</html>

CSS animation-composition - 累积值

以下示例演示了 cum 值在 animation-composition 中的用法。累积合成（#accumulate-demo）也累积转换，但与 add 不同的是，它保留以前的状态而不重置，从而导致多次迭代中不断累积转换。


<html>
<head>
<style>
	 	@keyframes moveRight {
	 	 	 0%, 100% {
	 	 	 transform: translateX(0);
	 	 	 background-color: lightblue;
	 	 	 }
	 	 	 50% {
	 	 	 transform: translateX(100px);
	 	 	 background-color: lightcoral;
	 	 	 }
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 20px;
	 	 	 display: inline-block;
	 	 	 animation-duration: 2s;
	 	 	 animation-iteration-count: infinite;
	 	 	 border: 2px solid #333;
	 	}
	 	#accumulate-demo {
	 	 	 animation-name: moveRight;
	 	 	 animation-composition: accumulate;
	 	}
	 	.container {
	 	 	 text-align: center;
	 	 	 margin-top: 50px;
	 	}
	 	.label {
	 	 	 font-weight: bold;
	 	 	 margin-bottom: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="label">Accumulate Composition</div>
	 	 	 <div class="box" id="accumulate-demo"></div>
	 	</div>
</body>
</html>

打印本页