Terminemos la semana con algo divertido, ¿vale? Las animaciones de fotogramas clave de CSS actualmente tienen un soporte de navegador muy limitado, pero todavía son bastante interesantes para aprender y experimentar.
A continuación, creamos una página web simple que aprovecha las animaciones de fotogramas clave de Webkit para cambiar suavemente el color de fondo en un bucle sin fin. Intrigado? Sigue leyendo
Manifestación
Para obtener un adelanto de lo que construiremos hoy, haga clic en el siguiente enlace.
Demo en vivo: Haga clic aquí
Animaciones de juegos clave: todavía sólo por diversión
Con CSS3, es bastante fácil que un color se convierta en otro, digamos en un comando flotar. Establecer dos colores diferentes, lanzar en una transición y ya está bueno para ir. ¿Pero qué pasa si queremos tener algo que cambie de color continuamente? La respuesta está en los fotogramas clave.
Actualmente, el soporte para animaciones de fotogramas clave en CSS es bastante bajo. De hecho, solo se puede confiar en que funcione en navegadores Webkit como Safari y Chrome (Firefox 5 también debería recibir asistencia). Entonces, la parte desafortunada es que, al igual que con muchos trucos de CSS3, esto no está del todo listo para su uso en producción a menos que esté completamente preparado para que una gran cantidad de usuarios se pierda la experiencia.
Cómo funcionan los fotogramas clave
Las animaciones de fotogramas clave son una de las características nuevas más complicadas de CSS. De hecho, se siente un poco más como la programación que el estilo, incluso hasta el punto de casi declarando una variable! Hagamos un recorrido rápido y sucio para ver cómo funcionan.
Lo primero que debes hacer es declarar el bloque de fotogramas clave de webkit y nombrar tu animación.
Como indiqué anteriormente, su nombre de animación es casi como una variable a la que recurrirá más adelante, así que asegúrese de que sea descriptivo y fácil de recordar. Por ejemplo, para nuestro experimento, podríamos usar el nombre "colorPulse".
A continuación, llenamos esto con una especie de línea de tiempo para nuestra animación. Piense en ello como en declarar fotogramas clave como lo haría en un programa de animación, solo que aquí está usando código puro. Los porcentajes representan el estado del objeto en ese punto de la animación.
Aquí obviamente estamos animando la propiedad de color de fondo. En 0%, el color sería rojo, en 50% sería blanco y en 100% sería azul. Toda la interpolación se realiza automáticamente, por lo que todo lo que queda es aplicar la animación a un elemento específico y definir el comportamiento. Aquí lo aplicamos a un div.
Como puede ver, usamos el nombre de la animación, esto apunta a las cosas que configuramos antes. A continuación, establecemos la duración (10 segundos), el número de iteraciones (infinito) y la dirección (alternativa). El último de estos hará que la animación se ejecute hacia atrás y hacia adelante: rojo, blanco, azul, blanco, rojo, blanco, azul, etc.
Esto es realmente la taquigrafía de estas declaraciones. También puede configurarlos uno a la vez. Aquí hay una lista más grande de las propiedades de animación que puedes definir:
Fondo del sitio web pulsante
Ahora que tenemos una idea de cómo funciona esto, vamos a profundizar más construyendo un ejemplo real. Comenzaremos diseñando un diseño de página básico y luego terminaremos agregando nuestra animación.
Color de fondo
Para diseñar la página, necesitamos elegir un color de fondo. Esta es una tarea interesante considerando el proyecto. Nuestro objetivo es crear un fondo que pulsa de un color a otro. No puedo subrayar lo peligroso que es esto desde la perspectiva de un diseñador. ¡Casi estás condenado a crear algo tan feo que nadie puede mirarlo!
La mejor manera en que podemos abordar esto es desde una posición de sutileza. Queremos cambios lentos y suaves que sean agradables y no discordantes. Si escogemos colores demasiado audaces o brillantes, quemaremos los ojos de los espectadores.
Desde que acabamos de pasar Easer, mi mente está atascada en los pasteles y se me ocurrió que tal paleta podría ser perfecta para este proyecto. Encendí a Kuler, busqué? ¿Pastel? y encontré la siguiente paleta.
Estos son los colores que usaremos para nuestro fondo. Cuando se combina con un cambio realmente lento, debería darnos un efecto bastante suave y atractivo.
HTML básico
Para sentar las bases de nuestro experimento, creé mi cliché típico? Diseño de diseño web: un encabezado, subtítulo y una imagen. Realmente no necesitamos mucho, solo lo suficiente para que la página no sea increíblemente aburrida.
Como puede ver, colocamos intervalos al 0%, 25%, 50%, 75% y 100% para que nuestra animación esté bien dividida.En cada parada colocamos un color de nuestra paleta Kuler.
A continuación, además de aplicar un color de fondo estándar, que servirá como nuestro respaldo, declaramos la animación. Tenga en cuenta que lo tengo configurado en la friolera de 40. Nuevamente, ya que esto tiene tanto potencial para ser una animación intensa, queremos que sea muy lenta. De hecho, incluso me gusta cómo se ve con el tiempo establecido para duplicar eso.
Producto terminado
Y una vez más, en caso de que te lo perdieras, aquí está el producto terminado. Observe lo agradables que son las transiciones de color a color. Desde que comenzamos con una buena paleta, los cambios son bastante naturales y no distraen demasiado.
Demo en vivo: Haga clic aquí
Conclusión
En los próximos años comenzará a ver más y más soporte para animaciones de fotogramas clave CSS. En este momento funcionan muy bien en Safari y Chrome, que consistentemente sirven como un vistazo al futuro de HTML y CSS, y están en línea para trabajar con Firefox como @ -moz-keyframes.
El propósito de este artículo fue para que pienses en todas las animaciones no tradicionales que puedes crear con las animaciones de fotogramas clave. Espero que hayas aprendido una o dos cosas y te hayas inspirado para crear tus propias aplicaciones únicas.