Animaciones aleatorias puro Css

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.

Animaciones aleatorias puro Css. Random animation pure Css (aperiodic) 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.

Comparte

Este blog no usa "botones sociales" para que compartas su contenido por respeto a tu privacidad y mejora de su funcionamiento. Además, no los necesitas, ¿o sí?

Publicado el por y Archivado en | | |

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

También puedes ver alguno de estos artículos que tienen relación con el que acabas de leer:

3 comentarios :

  1. El otro día me surgió la misma cosa y lo solucioné de la misma manera, pero usando Sass:

    @for $i from 1 through 10
    &:nth-child(#{$i})
    +animation(opacity .2s ease-out #{$i/10}s forwards)

    No sé cómo se publica código acá. :-(

    ResponderEliminar
  2. Vale. Estoy ciego.


    @for $i from 1 through 10
    &:nth-child(#{$i})
    +animation(opacity .2s ease-out #{$i/10}s forwards)

    ResponderEliminar
    Respuestas
    1. Además hay que cambiar todos los "<" por "&lt;".
      :-P

      ¿Sass aplica estilos usando un lenguaje de programación, verdad?. Yo jamás lo probé, y reniego un poco hasta de las funciones CSS. Aquí se mencionó a calc() porque es la que más posibilidades tiene de adaptarse mañana al efecto propuesto, pero lo cierto es que hoy solamente hace operaciones básicas (suma, resta, multiplicación o división) y su fuerte es la conversión de cualquier magnitud con unidad relativa (o no) a pixeles, y después hacer los cálculos para aplicar valores.
      HTML5 ya interactúa con el clock de la máquina para obtener horas y días (así trabajan los input type=date/time/...), así que para CSS sería fácil hacer lo mismo y meter en un ::before {content: } la fecha de hoy. De ahí a capturar milisegundos actuales para crear un número pseudoaleatorio como hace (p.e.) javascript, hay un paso cortito...

      Eliminar