html css版本更新时间,html5 – 使用纯CSS增加CSS持续时间

如果您可以假设所有元素都在DOM树中处于同一级别,则可以在CSS中完成此操作.但是你必须决定你愿意支持的最大元素数,因为你需要为每个潜在元素编写CSS.

例如,要支持最多四个元素,您可以执行以下操作：

.bounce { animation-delay:0s; }

.bounce ~ .bounce { animation-delay:0.1s; }

.bounce ~ .bounce ~ .bounce { animation-delay:0.2s; }

.bounce ~ .bounce ~ .bounce ~ .bounce { animation-delay:0.3s; }

第一个’反弹’元素只会延迟0秒.一个’反弹’元素前面有另一个’反弹’元素(即它是第二次出现),将得到0.1秒的延迟.并且在另外两个“反弹”元素之前的“反弹”元素(即它是第三个)将延迟0.2秒.等等.

显然,您想要支持的元素越多,这些选择器就越长.因此,如果您需要在表单上支持大量输入,那么CSS可能会变得有点笨拙,但这是可能的.

像SASS或LESS这样的预处理器可以使CSS的生成更容易,但输出仍然相当大.

例如,以下是您在SASS中的表现方式：

@mixin generateDelays($class,$increment,$count) {

$selector: ".#{$class}";

$delay: 0s;

@while $count > 0 {

#{$selector} { animation-delay:$delay; }

$selector: "#{$selector} ~ .#{$class}";

$delay: $delay + $increment;

$count: $count - 1;

}

}

@include generateDelays('bounce',0.1s,10);