Incremental CSS duration using pure CSS

Question

I use -webkit-animation properties to rotate form elements to their places when user first view a page.

I use the following code to achieve that:

.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);
    }
}

the server side code is PHP. in each form element in my php class I had the class 'bounce' and I add an inline property named -webkit-animation-duration which I increment by 0.18 between each for element.

php code:

private $animationDuration=0.7;

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

Here I add a property named 'style' to each form element with the result of the _getAnimationDuration() function.

The question is: can I somehow implement the _getAnimationDuration() function using pure CSS3 and HTML5 (without JavaScript)?

I want to add a animation duration css style that is different between each form element. each one increased by the same amount.

Answer 1

If you can assume that all of the elements are at the same level in the DOM tree, you can accomplish this in CSS. But you have to decide on the maximum number of elements that you are willing to support up front, since you need to write the CSS for each potential element.

For example, to support up to four elements, you would do something like this:

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

The first 'bounce' element just gets a delay of 0 seconds. A 'bounce' element that is preceded by another 'bounce' element (i.e. it is the second occurrence), will get a delay of 0.1 seconds. And a 'bounce' element preceded by two other 'bounce' elements (i.e. it is the third), will get a delay of 0.2 seconds. And so on.

Obviously the more elements you want to support, the longer these selectors become. So if you need to support a large number of inputs on your form, the CSS may become somewhat unwieldy, but it is possible.

A preprocessor like SASS or LESS can make the generation of the CSS easier, but the output is still going to be fairly large.

For example, here's how you might do it in 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);