CSS es uno de los lenguajes de programación más versátiles de uso popular. Desde diseños y efectos de texto hasta el color y el tamaño de su contenido, las posibilidades son infinitas. Uno de los usos más interesantes de CSS es la creación de animaciones. Y de esto se trata este post.
Esta publicación enumera algunas de las animaciones CSS más creativas que encontrarás en la web. Desde efectos de transición hasta animaciones de personajes, aquí encontrarás algunos ejemplos realmente interesantes que puedes usar directamente en tu proyecto o inspirarte. Así que echa un vistazo y elige tu favorito.
Animación de carga CSS
Creador: patrikhjelm
Siete puntos animados se desplazan hacia la izquierda y hacia la derecha para indicar una acción de carga.
Icono de carrito de compras animado
Creador: jonitrythall
Lindos efectos animados para cuando se agregan alimentos al carrito de compras. Desplácese hacia abajo para obtener más información.
Animación solo CSS3 de hamburguesa
Creador: David Krajewski
Construido con CSS puro, sin JS ni nada más.
404 personaje animado
Creador: con una es
Al menos con esta página de error, un desarrollador está trabajando en ello. Incluso si es un 404.
Aterrizaje CSS en Marte
Creador: mgitch
¡Hemos aterrizado en Marte! Hecho con CSS.
El vengador
Creador: mariosmaselli
¿Puedes oír la ira de Hulk temblar a través de la pantalla? ¿Guay, verdad?
Alternar día/noche
Creador: jsndks
Ahora puedes alternar día y noche con CSS. ¡Idea genial!
Aplicación de terceros Google Now
Creador: codecalma
Aplicaciones de terceros de Google Now, animadas.
clo clo
Creador: judag
¿Se mueve así un gallo? Puedes apostar que sí, completo con el cuello jiggy. Gran práctica de CSS3.
Otro precargador de CSS
Creador: masone
Una increíble animación de carga rítmica CSS. Hipnótico, ¿no?
Botón de enviar
Creador: auginador
Haga clic para enviar y el botón animará el proceso de carga hasta que se complete el envío.
Diseño de material de barra lateral SVG elástico
Creador: suez
Arrastre la barra blanca hacia la derecha para ver un efecto de barra lateral elástica.
botón de partículas
Creador: igcorreia
Haz lo que dice el botón: coloca el cursor sobre lo maravilloso.
Botón pegajoso
Creador: Lucas Bebber
Haga clic para el efecto pegajoso. Lo obtendrás una vez que lo veas y harás clic en él unas cuantas veces más. ¿Amirita?
Botón inverso
Creador: hakimel
Haga clic en cualquier lado del botón Eliminar y el botón se volteará según donde haga clic.
¡Verdadero menú de hamburguesas!
Creador: charlesinteligente
Un menú de hamburguesas realmente delicioso. Haga clic en la hamburguesa para ver los efectos.
Crucero
Creador: yy
Ver moto en marcha.
Onda de cubo 3D
Creador: waddington
Animación de firma
Creador: secogiel
Aquí hay una firma que en realidad no es una animación GIF, sino una secuencia PNG animada con CSS3.
Animación de degradado de fondo
Creador: cuasimondo
Este truco cambia el degradado del fondo de un color a otro de forma suave y continua.
Icono de alternancia de Star Wars
Creador: rss
Un menú de hamburguesas se transforma en sables de luz en la batalla (una cruz).
Animación de estilo GIF
Creador: jasha
Mira cómo se materializa una fotografía en medio del pixel art.
Animación de entrada/salida de enfoque
Creador: flujo
Un pequeño bolígrafo animado escribe encima del formulario que está completando.
triangulo cromatico
Creador: felipedefarias
Una ilusión óptica impresionante, sí, hecha con CSS3.
Cafetera
Creador: esteesroger
Aquí tienes un recordatorio para tomar tu dosis diaria de café. Como si necesitaras uno.
Dinosaurio cromado
Creador: nickspiel
¿No puedes acceder a la página que deseas debido a una caída de la conexión? Aquí está el dinosaurio que siempre ves cuando eso sucede, ¡solo que esta vez huye de un meteorito!
batido CSS
Creador: elrumordelaluz
Coloca el cursor sobre cada efecto para ver temblar al pequeño.
Cargador de cuna de Newton
Creador: Todo lo relacionado con Smitty
Si sabes física, seguro que sabes la cuna de Newtonpero probablemente no así.
Lanzar el modal
Creador: koolhaus
Haga clic para ver la bonita y fluida animación de la ventana modal.
robot andante
Creador: P233
Este robot sigue caminando, caminando y caminando alrededor del eje Y.
Flexionar las flechas de paginación
Creador: Hakim
Desde la primera página hasta la última, esta animación de paginación muestra claramente cómo le va, página a página.
Aquí hay más:
Hélice 3D animada
La primera de la lista es una increíble animación realizada por Marcofolio.net, utilizando transformaciones 3D CSS3. La animación parece mágica en sí misma, ¡pero puedes aprender a crear un efecto similar con el tutorial del artículo!
Botones animados
Una visita obligada para los diseñadores web, ya que la demostración no solo muestra las posibilidades de la animación CSS3 sino que también proporciona efectos de botones muy interesantes y prácticos para inspirarse.
Menús de animación
¿Estás intentando darle vida a tus menús de animación para que se vean realmente geniales y creativos? Esta demostración es para ti.
Vaya cosa
Es la animación fluida y agradable lo que hizo que esta demostración fuera tan importante.
Hombre CSS3
¡Cuidado, aquí viene el hombre CSS3! Un ejemplo perfecto para mostrar el verdadero potencial de la animación CSS3.
Rebotar la pelota rebotando
Con el poco uso de trucos gráficos se llega a una animación CSS3 agradable y divertida.
Animación cuadro por cuadro
¿Animación cuadro a cuadro con CSS3? ¡Ningún problema!
Animación gráfica
Una animación simple pero poderosa para que muestres/expliques el gráfico en tu sitio, ¡aprende a hacerlo!
Efectos de desplazamiento
El futuro del efecto de desplazamiento llega con CSS3. Elegante y prometedor.
Zoom infinito
Animación fluida; también es una buena manera de mostrar su portafolio. El zoom total de las 26 imágenes es 67108864:1.
Kinect y CSS3
“Se rastrean 14 articulaciones del cuerpo y se convierten en una breve animación CSS usando Xbox Kinect. Los datos del cuerpo se llevan al navegador donde se analizan y se convierten en animaciones CSS con animatable.com”.
Matriz
¿Quieres ser tan genial como Matrix? Con CSS3, puedes hacerlo.
Cubos transformadores
Demostración experimental que explora CSS3 mediante transformaciones, animaciones y transiciones 3D. Lo interesante aquí es que aún puedes seleccionar el texto de los elementos, incluso cuando todavía están girando.
Nuestro sistema solar
Ya no necesita un costoso software independiente para ayudar a los estudiantes a explorar los sistemas solares.
Rollo de tontería
“Mmmmmm… A Homero le encantaría tener un suministro interminable de cerveza”.
Círculo de carteles
Un ejemplo simple pero interesante que le muestra cómo usar la transformación y animación CSS para lograr un efecto interesante.
Rastreo de Star Wars
¡El efecto de rastreo de la apertura de Star Wars! Tan épico como CSS3.
Efectos de tipografía
Además de los efectos de botón, menú y desplazamiento, también puedes lograr efectos de tipografía creativos con CSS3. jQuery también participa en esta demostración para diseñar las letras de las palabras.
Caminando con Andrew Hoyer
¡Lo mejor de todo es que también puedes aprender a caminar con Andrew Hoyer en el artículo!
Kit web maravilla
Un uso maravilloso de las transformaciones 3D CSS3 con la biblioteca JavaScript Matrix. Suena técnico, pero el resultado es tremendamente genial.
Zoótropo
¿Qué más no puedes hacer con CSS3 cuando Zoetrope es posible con él?
Más:
Aquí hay más artículos relacionados que podrían interesarle:
