Question

我一开始就开始两个CSS动画，并为此使用animation-delay。但是随后我为animationation 1和animation-2编写animation-iteration-count，它仅适用于animation-2。而且我不想只使用％，从头到尾。

#body1 { 
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
    animation-delay: 0s, 2s;
    animation-iteration-count: 2,2;
}
@keyframes animation-1 {
	from { transform: translate3d(0px, 0px, 0px); }
	to { transform: translate3d(0.5px, -.2px, 0px); }
}
@keyframes animation-2 {
	from { transform: translate3d(0.5px, -.2px, 0px); }
	to { transform: translate3d(0px, -0.5px, 0px); }
}

Answer 1

public class Account { public Account([NotNull] string code, [NotNull] Money debit, [NotNull] Money credit) { Code = code ?? throw new ArgumentNullException(nameof(code)); Debit = debit ?? throw new ArgumentNullException(nameof(debit)); Credit = credit ?? throw new ArgumentNullException(nameof(credit)); EnsureIsValid(); } public string Code { get; } public Money Debit { get; } public Money Credit { get; } public void IncreaseDebit(Money amount) { Debit += amount; EnsureIsValid(); } public void IncreaseCredit(Money amount) { Credit += amount; EnsureIsValid(); } private void EnsureIsValid() { //some checks for invariants } } public class Money { //some code.. } public class MoneyTransferService { public void Transfer(Account fromAccount, Account toAccount, Money amount) { fromAccount.IncreaseCredit(amount); toAccount.IncreaseDebit(amount); } }属性仅延迟动画的 initial 开始，但是在动画开始后它将连续运行。

现在，当动画第二次开始时，它将不执行animation-delay，而仅执行animation-1（原因是animation-2的动画声明将被{{1 }}，因为两者将同时开始。

您可以使用％值解决此问题。仅使用animation-2和animation-1值是不可能的。

（也就是说，使用from值在动画之间添加延迟）。

更好的代码版本如下：（删除2个动画，只让一个动画声明完成这项工作）

to

为什么动画迭代不能延迟？

1 个答案: