Duración de CSS incremental con CSS puro

Question

Utilizo las propiedades -webkit-animation para rotar los elementos de formulario a sus lugares cuando el usuario ve una página por primera vez.

uso el siguiente código para lograr que: el código del lado

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

el servidor es PHP. en cada elemento de formulario en mi clase php tuve la clase 'bounce' y agregué una propiedad en línea llamada -webkit-animation-duration que incrementó en 0.18 entre cada elemento.

código PHP:

private $animationDuration=0.7; 

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

Aquí añado una propiedad denominada 'estilo' a cada elemento de formulario con el resultado de la función _getAnimationDuration().

La pregunta es: ¿de alguna manera puedo implementar la función _getAnimationDuration() usando CSS3 puro y HTML5 (sin JavaScript)?

Quiero agregar un estilo css de duración de la animación que es diferente entre cada elemento del formulario. cada uno aumentó en la misma cantidad.

Answer 1

Para resumir los comentarios:

La solución existente es inherentemente HTML5/CSS3; con una ayuda de back-end de PHP para generar dinámicamente los estilos de CSS3.

Los estilos CSS paramétricos o dinámicos no son posibles únicamente con HTML5 y CSS3. LESS o Sass pueden utilizar JavaScript y la compilación de la biblioteca para acercarse al resultado deseado.

Answer 2

Si puede suponer que todos los elementos están en el mismo nivel en el árbol DOM, puede hacerlo en CSS. Pero debe decidir la cantidad máxima de elementos que está dispuesto a admitir por adelantado, ya que debe escribir el CSS para cada elemento potencial.

Por ejemplo, para soportar hasta cuatro elementos, que haría algo como esto:

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

El primer elemento de 'rebote' sólo se pone un retardo de 0 segundos. Un elemento 'rebote' que está precedido por otro elemento 'rebote' (es decir, es la segunda aparición), recibirá un retraso de 0.1 segundos. Y un elemento 'rebote' precedido por dos otros elementos 'rebote' (es decir, es el tercero), recibirá un retraso de 0.2 segundos. Y así.

Obviamente, cuantos más elementos desee soportar, más largos serán estos selectores. Entonces, si necesita admitir una gran cantidad de entradas en su formulario, el CSS puede volverse algo difícil de manejar, pero es posible.

Un preprocesador como SASS o LESS puede facilitar la generación de CSS, pero la salida seguirá siendo bastante grande.

Por ejemplo, aquí es cómo puede hacerlo en 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);