Animación aleatoria puro Css (random css animation) 23.11.15
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)
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 codepenEn 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.
Kseso
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
El otro día me surgió la misma cosa y lo solucioné de la misma manera, pero usando Sass:
ResponderEliminar@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á. :-(
Vale. Estoy ciego.
ResponderEliminar@for $i from 1 through 10
&:nth-child(#{$i})
+animation(opacity .2s ease-out #{$i/10}s forwards)
Además hay que cambiar todos los "<" por "<".
Eliminar:-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...