动画持续时间html,html5 – 使用纯CSS增加CSS持续时间

当用户第一次查看页面时,我使用-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样式.每一个增加相同的数量.