soy Kseso y esto EsCSS

Animación aleatoria puro Css (random css animation)

Demo de animaciones aleatorias (no cíclicas) en puro Css: ¿Es posible realizar animaciones aleatorias con puro css? Sí y no. Con css no se pueden obtener valores aleatorios pero SÍ se pueden simular.

Animación aleatoria puro Css (random css animation)

·Por Kseso ✎ 3
Animaciones aleatorias puro Css

Más de una vez ha surgido la pregunta de si es posible y cómo generar un valor aleatorio con CSS. Y la respuesta es sencilla: De momento, ni 'calc()' lo permite.

Inquietud que se vuelve más interesante si tratamos con algunas de las últimas propiedades como las animaciones. Porque una de las peculiaridades de las animaciones realizadas con css es su carácter cíclico. Creado el patrón con las distintas propiedades que engloba la acortada animation se va a repetir sin variaciones de un ciclo al sguiente.

O dicho de otra forma: las animaciones realizadas con css se caracterizan por tener una frecuencia (y sus ciclos) muy marcada y reconocible. Más o menos amplia, pero fácilmente identificables.

Entonces, la cuestión es si es posible hacer animaciones en puro Css en las que su frecuencia, ciclos y periodos sean "caóticos" o sin un patrón "regular".

Y lo cierto es que con css no se puede lograr tal cosa. Pero como siempre, una cosa es que se pueda realizar y otra muy distinta que parezca que sí se puede.

Así que tendremos que cambiar la respuesta anterior a la pregunta sobre obtener valores o comportamientos aleatorios con Css y cómo. Ahora habrá que responder que:

Con css ni se pueden obtener ni generar valores o comportamientos aleatorios. Pero sí se puede simularlos.

Lo siguiente es obra de Furoya, que si visitas este blog habrás visto que es un comentarista habitual.

Animaciones aleatorias puro Css

Ver demo en codepen

En el correo que acompaña a su demo, Furoya indica que se le encendió la luz al conjuntar dos temas tratados en el blog: gif´s puro css y el relativo a los cicadients: o la metamorfosis del principio de la cicada

Por mi parte sólo optimicé la imagen del ejemplo primero (los cuadrados) y añadí el segundo donde en vez de animar la posición del background lo que hace es animar la anchura de los elementos.

Como los códigos empleados los tienes en el pen, así como todo el css, esta vez no los despiezo para su explicación. Cualquier duda de su funcionamiento déjala en un comentario.

See the Pen Random animation puere CSS by Kseso (@Kseso) on CodePen

Una breve explicación

Como puedes ver en los códigos, todo pasa por ejecutar simultáneamente la misma animación en varios elementos superpuestos modificando el valor de alguna propiedad del grupo de las animation. Como el tiempo de ejecución animation-duration, o el retraso animation-delay, o incluso el tipo de animación animation-timing-function.

.golf {animation: lima .7s linear alternate infinite 5s} .hotel {animation: lima 3s linear alternate infinite 3s} .india {animation: lima 5s ease-in alternate infinite .7} .juliet {animation: lima 7s ease-in alternate infinite .3s} .kilo {animation: lima 1s linear alternate infinite}

Tus variaciones

Como verás, esta idea se presta a mucho juego y diversión. Incluido el utilizar pseudoelementos, cambiar las imágenes por gradientes, jugar con los tiempos de cada animación y sus delays... Cualquier cosa que se te courra.

Así que adelante, haz tus "animaciones aleatorias", deja un enlace en tu comentario y las vamos añadiendo al artículo.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso