25. Herramientas avanzadas
Un buen recopilatorio, fácil de utilizar, son las recogidas en Animation.css. Sin embargo una de las herramientas más completas en el sector es Greensock, aunque requiere conocimientos en JavaScript.
Actividad 1
Crea un circulo, representando al Sol, que se sitúe en mitad de la página. A continuación crea otro circulo que represente una luna con la animación para realizar un eclipse, o tape por completo, durante unos instantes.
Actividad 2
A partir de imágenes o formas simples, crea una noria que rote lentamente.
Actividad 3
Transcurrido unos segundos muestra, con una elegante animación (fundido o desplazamiento), un cartel de cookies.
Actividad 4
Crea un reloj animado donde funcionen sus agujas.
Pista: Puedes apoyarte con transform-origin.
Actividad 5
Busca referencias de loadings (cargando...) animados y crea el tuyo propio.
Actividad 6
Crea una animación de un péndulo.
Pista: Necesitarás transform-origin.
This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.
/https://andros.dev/static/img/components/license/by-nc-nd.png)