Geek asks and answers

Incremental CSS Duration Using Pure CSS

I use properties -webkit-animationto rotate form elements in their places when the user first views the page.

For this, I use the following code:

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

server code is PHP. in every form element in my php class I had a rebound class and I add an inline property with a name -webkit-animation-durationthat I increment by 0.18 between each 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 called 'style' to each form element with the result of the function _getAnimationDuration().

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

css , . .

+5
2

, 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);
+1

:

HTML5/CSS3; PHP CSS3.

CSS HTML5 CSS3. LESS Sass JavaScript , .

0

More articles:


All Articles