【问题标题】：Incremental CSS duration using pure CSS使用纯 CSS 增加 CSS 持续时间
【发布时间】：2013-04-30 11:22:13
【问题描述】：

当用户第一次查看页面时，我使用-webkit-animation 属性将表单元素旋转到它们的位置。

我使用以下代码来实现：

.bounce {
    -webkit-animation-name: bounceup;
}


@-webkit-keyframes bounceup {
    from {
    opacity:0.5;
    -webkit-transform: translateY(100px) rotate(180deg);
    -webkit-box-shadow: 20px 20px 80px #000;
    }
    to {
    opacity:1;
    -webkit-transform: translateY(0px) rotate(0deg);
    }
}

服务器端代码是 PHP。在我的 php 类的每个表单元素中，我有一个类“bounce”，我添加了一个名为 -webkit-animation-duration 的内联属性，我在每个 for 元素之间递增 0.18。

php代码：

private $animationDuration=0.7;

private function _getAnimationDuration() {
    $ret= '-webkit-animation-duration: '.$this->animationDuration.'s';
    $this->animationDuration+=0.1;
    return $ret;
}

在这里，我为每个表单元素添加了一个名为“样式”的属性，其中包含_getAnimationDuration() 函数的结果。

问题是：我能否以某种方式使用纯 CSS3 和 HTML5（不使用 JavaScript）实现 _getAnimationDuration() 函数？

我想在每个表单元素之间添加不同的动画持续时间 css 样式。每一个都增加了相同的数量。

【问题讨论】：

我对你在问什么感到困惑。您的代码使用纯 HTML5+CSS3，不是吗？ PHP 所做的只是动态生成 CSS3 样式（无需使用 PHP 即可轻松完成）。
我在问如何在不使用 php 或 javascript 的情况下轻松完成 -webkit-animation-duration 指令的动态增量。使用纯 html5 和 css3。
通过阅读stackoverflow.com/questions/5029032/…，我的要求似乎是不可能的。可以使用 LESS 但又一次。它使用 javascript，所以我回到了第一格。
我还是不明白。 -webkit-animation-duration 是一个 CSS3 属性。
看看那个链接，我想我明白了，你想做参数化的 CSS 样式（而不是列出一堆类似的 CSS 块）。如果是这种情况，那么有一些 CSS 编译器可以提供帮助。例如，Sass：sass-lang.com

标签： html css css-animations

【解决方案1】：

如果您可以假设所有元素在 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; }

第一个 'bounce' 元素只会延迟 0 秒。前面有另一个 'bounce' 元素（即它是第二次出现）的 'bounce' 元素将延迟 0.1 秒。一个 'bounce' 元素前面有两个其他 'bounce' 元素（即它是第三个），将获得 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);

【讨论】：

【解决方案2】：

总结一下cmets：

现有的解决方案本质上是 HTML5/CSS3；借助 PHP 的后端辅助来动态生成 CSS3 样式。

仅使用 HTML5 和 CSS3 无法实现参数化或动态 CSS 样式。 LESS 或 Sass 可以利用 JavaScript 和库编译来接近预期的结果。

【讨论】：