Transiciones y animaciones creativas en CSS

Esta guía tiene la finalidad realizar experimentos o ejercicios con las transiciones y animaciones en CSS, aplicados a botones, imágenes, textos y elementos HTML más completos; veremos el enfoque más básico de las animaciones en CSS que serían utilizando las transiciones, veremos múltiples ejemplos y limitantes que tenemos al trabajar con la forma más simple de lograr animaciones en CSS que es el uso de las transiciones. En posteriores capítulos también trabajaremos con las animaciones, conoceremos sus características, posibles configuraciones, opciones y modos y con esto, veremos un enfoque más completo en lograr animar en CSS.

En este libro, veremos más de 100 ejemplos completos y funcionales de animar elementos HTML, comenzaremos aplicando transiciones en CSS sobre botones, textos entre otros, para llegar a las animaciones en las cuales, crearemos experimentos desde cero, adaptamos los que utilizamos con transiciones y emplearemos las transiciones y animaciones de manera conjunta.

Este es un libro para experimentar con las animaciones en CSS, con esto vamos a mencionar lo siguiente:

1. No es un libro que tenga por objetivo conocer al 100% las animaciones en CSS, si no, de manera básica/intermedia; el objetivo es, experimentar y con esto, presentar distintas plantillas que podemos utilizar para crear todo tipo de animaciones más complejas o simplemente diferente.
2. Se da por hecho de que el lector tiene conocimientos al menos básicos en el uso de CSS.

En comparación con otros libros, el enfoque es en su mayoría práctico, presentando más de 100 experimentos en los cuales trabajar y lograr la inspiración para otros tipos de efectos en CSS.

Este libro tiene un total de 5 capítulos, se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los componentes del framework, vayas directamente a la práctica, repliques, pruebes y modifiques los códigos que mostramos en este libro.

1. En este sección vamos a dar un repaso a las transformaciones geométricas, traslaciones y animaciones en CSS.
2. En esta sección, vamos a crear multitud de ejemplos de transiciones en CSS aplicados a botones, en estos ejemplos aplicaremos principalmente transformaciones geométricas, pero también trabajaremos con otras propiedades de CSS.
3. En esta sección, vamos a presentar diferentes ejemplos de efectos en CSS con el evento hover; es decir, seguiremos utilizando las transiciones de CSS como se realizó en el anterior capítulo; para estos ejemplos, usaremos cualquier clase de estructura HTML que no serán botones como en el capítulo anterior.
4. En esta sección, crearemos efectos variados utilizando las transiciones, también, veremos sus limitantes mediante varios ejemplos que analizaremos en el siguiente capítulo utilizando las animaciones para lograr animaciones más completas.
5. En esta sección, presentaremos el uso de las animaciones, basado en ejemplos, iremos viendo sus posibles variantes, configuraciones y ejemplos utilizando animaciones y transiciones por igual.