php代码：

Question

我使用-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的内联属性，我在每个元素之间增加了0.18。

php代码：

private $animationDuration=0.7;

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

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

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

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

Answer 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; }

第一个'反弹'元素只会延迟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);

Answer 2

总结评论：

现有的解决方案本身就是HTML5 / CSS3;使用PHP的后端辅助来动态生成CSS3样式。

参数化或动态CSS样式不能单独使用HTML5和CSS3。 LESS或Sass可以利用JavaScript和库编译来接近期望的结果。

使用纯CSS增加CSS持续时间

php代码：

2 个答案: