使用纯CSS增加CSS持续时间

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

总结一下评论：

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

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