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.

I'm confused as to what you're asking. The code you have uses pure HTML5+CSS3, doesn't it? All PHP does is generate CSS3 styles dynamically (which you could easily do without using PHP). — McGarnagle
– McGarnagle, Commented Jul 5, 2012 at 9:59
i'm asking how the dynamic incremental of the -webkit-animation-duration directive can easily done without using php or javascript. with pure html5 and css3. — ufk
– ufk, Commented Jul 5, 2012 at 13:00
by reading stackoverflow.com/questions/5029032/… it seems that what i requested is not possible. it is possible using LESS but then again. it uses javascript so i'm back at square one. — ufk
– ufk, Commented Jul 5, 2012 at 14:30
I still don't understand. -webkit-animation-duration is a CSS3 property. — McGarnagle
– McGarnagle, Commented Jul 5, 2012 at 15:53
Looking at that link, I think I get it, you want to do parameterized CSS styles (rather than listing out a bunch of similar CSS blocks). If that's the case then there are some CSS compilers that could help. Eg, Sass: sass-lang.com — McGarnagle
– McGarnagle, Commented Jul 5, 2012 at 15:58

James Holderness · Accepted Answer · 2013-04-30 03:22:13Z

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

KatieK · Accepted Answer · 2012-10-26 17:50:49Z

0

To summarize the comments:

The existing solution is inherently HTML5/CSS3; with a back-end assist from PHP to dynamically generate the CSS3 styles.

Parametrized or dynamic CSS styles are not possible solely with HTML5 and CSS3. LESS or Sass can utilize JavaScript and library compilation to come close to the desired result.

answered Oct 26, 2012 at 17:50

KatieK

13.9k19 gold badges79 silver badges91 bronze badges

Collectives™ on Stack Overflow

Incremental CSS duration using pure CSS

php code:

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

php code:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related