Animaciones html5 css3 ejemplos
Colección de ejemplos de animación CSS3 avanzadas y html gratuitos . Actualización de la colección de agosto de 2022. 12 artículos nuevos.
Una evolución con CSS3 fue la capacidad de escribir comportamientos para transiciones y animaciones. Los desarrolladores front-end han estado solicitando la capacidad de diseñar estas interacciones dentro de HTML y CSS, sin el uso de JavaScript o Flash, durante años. Ahora su deseo se ha hecho realidad.
Con las transiciones de CSS3, tiene el potencial de alterar la apariencia y el comportamiento de un elemento cada vez que se produce un cambio de estado, como cuando se pasa el cursor por encima, se enfoca, se activa o se apunta.
Las animaciones dentro de CSS3 permiten modificar la apariencia y el comportamiento de un elemento en varios fotogramas clave. Las transiciones proporcionan un cambio de un estado a otro, mientras que las animaciones pueden establecer múltiples puntos de transición en diferentes fotogramas clave.
Transiciones
Como se mencionó, para que se produzca una transición , un elemento debe tener un cambio de estado y se deben identificar diferentes estilos para cada estado. La forma más fácil de determinar estilos para diferentes estados es usando las pseudoclases :hover, :focus, :activey :target.
Hay cuatro propiedades relacionadas con la transición en total, incluidas transition-property, transition-duration, transition-timing-functiony transition-delay. No todos estos son necesarios para construir una transición, siendo los tres primeros los más populares.
¿Cómo realizar una animación en CSS?
Para realizar una animación en CSS, puedes seguir los siguientes pasos básicos:
- Define un elemento HTML: Crea un elemento HTML al que deseas aplicar la animación. Esto podría ser un div, una imagen, un botón u otro elemento de tu elección. Asegúrate de asignarle un identificador o una clase para poder seleccionarlo en CSS.
- Crea una regla CSS para la animación: Utiliza el identificador o la clase del elemento para crear una regla CSS específica para la animación. Puedes hacer esto en tu archivo CSS externo o en la sección
<style>de tu archivo HTML. Dentro de esta regla, especifica las propiedades que deseas animar y los valores de inicio y final. - Define la animación: Utiliza la propiedad
animationpara especificar la duración, el retraso, el tipo de animación y otros ajustes. Puedes usar la función@keyframespara definir los puntos clave de la animación y cómo cambian las propiedades a lo largo del tiempo. - Aplica la animación al elemento: Utiliza la propiedad
animation-namey asigna el nombre de la animación definida en el paso anterior al elemento seleccionado.
Aquí tienes un ejemplo básico de cómo se vería el código CSS para una animación simple de desplazamiento de un elemento hacia la derecha:
cssCopy code#mi-elemento {
animation-name: desplazamiento-derecha;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: ease-out;
}
@keyframes desplazamiento-derecha {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
En este ejemplo, el elemento con el identificador «mi-elemento» se desplazará hacia la derecha en 200 píxeles durante un período de 2 segundos, con un retraso de 1 segundo antes de que comience la animación. La función translateX se utiliza para cambiar la posición horizontal del elemento.
Recuerda que puedes experimentar con diferentes propiedades y ajustes para lograr una amplia variedad de efectos y animaciones en CSS. Además, puedes utilizar eventos y pseudo-clases para desencadenar animaciones en respuesta a acciones del usuario, como hacer clic o pasar el cursor por encima del elemento.
En el siguiente ejemplo, el cuadro cambiará de backgroundcolor en el transcurso de 1un segundo de una linearmanera.
Animación css ejemplos
PIRUETA DE PAPEL
Autor
- @keyframers
- 16 de septiembre de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Acerca de un código
Animación de página voladora 3D solo CSS.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Responsive: sí
ANIMACIÓN SVG
Autor
- Andrej Sharapov
- 11 de marzo de 2019
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Algunas animaciones SVG y fotogramas clave.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsive: sí
PEGATINA ANIMADA
Autor
- ycw
- 5 de febrero de 2019
Enlaces
Hecho con
- HTML (Pug) / CSS (Menos)
Sobre el código
Etiqueta animada en HTML y CSS.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Responsive: sí
ROCK HAND ANIMATION
Autor
- Vangel Tzo
- 16 de diciembre de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
H2O – ANIMACIÓN DEL MATRAZ QUÍMICO
Autor
- Ekaterina Vasilyeva
- 13 de diciembre de 2018
Enlaces
Hecho con
- HTML / CSS
Sobre el código
El matraz químico SVG está ligeramente animado con CSS.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsive: sí
ANIMACIÓN SUBMARINA CSS PURA
Autor
- Akhil Sai Ram
- 12 noviembre 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Responsive: sí
VELAS (ANIMACIÓN CSS PURA)
Autor
- Akhil Sai Ram
- 1 de noviembre de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
BALLENA Y LA LUNA
Autor
- Aswin Behera
- 13 de octubre de 2018
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Pura ballena CSS y la animación de la luna.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
ANIMACIÓN DE CASSETTE CSS
Autor
- Tony Banik
- 7 de septiembre de 2018
Enlaces
Hecho con
- HTML (Slim) / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsive: sí
CAFETERA ANIMACIÓN
Autor
- Henrique Rodrigues
- 31 agosto 2018
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Cafetera pura animación CSS.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
ANIMACIÓN DE ECLIPSE SOLAR
Autor
- Aris Acoba
- 30 agosto 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsive: sí
ANIMACIÓN CSS BOX DOG
Autor
- agathaco
- 29 agosto 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
CSS LIGHTHOUSE SCENE
Autor
- agathaco
- 26 agosto 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Responsive: sí
BITS Y BYTES ANIMACIÓN CSS
Autor
- Ollie
- 28 agosto 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
Dependencias: –
ANIMACIONES DE MENÚ DE PUNTOS
Autor
- Tamino Martinius
- 8 agosto 2018
Enlaces
Hecho con
- HTML / CSS (PostCSS) / JavaScript (TypeScript)
Sobre el código
Cuatro animaciones de menú diferentes para el botón de menú alternan entre los puntos, la cruz y el icono de retroceso.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
ANIMACIÓN DE BUCLE
Autor
- Yancy Min
- 4 agosto 2018
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Animación de bucle de desplazamiento de lupa.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
ANIMACIÓN DE NIÑERA CON BIGOTE CSS PURO
Autor
- Julia Muzafarova
- 2 agosto 2018
Enlaces
Hecho con
- HTML / CSS (PostCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
Dependencias: –
LA ANIMACIÓN DEL MANUAL
Autor
- Yancy Min
- 28 julio 2018
Enlaces
Hecho con
- HTML / CSS
Sobre el código
La animación de descarga del manual.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN DE LIBROS FLOTANTES
Autor
- Yancy Min
- 14 de julio de 2018
Enlaces
Hecho con
- HTML / CSS, CSS3
Sobre el código
Buena animación flotante para la portada del libro.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN CONECTADA
Autor
- Sean Codes
- 1 de julio de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS3 (SCSS) / JavaScript
Sobre el código
Animación simple conectada para ventanas modales.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
MOLINO DE VIENTO RECEPTIVO Y ANIMADO
Autor
- Ashish Bardhan
- 24 de junio de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Molino de viento (Pug + SCSS): receptivo y animado.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsive: sí
Dependencias: –
ANIMACIÓN CSS: HORA DEL DÍA
Autor
- Olivia
- 23 de abril de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS) / JavaScript
Sobre el código
Experimento de animaciones CSS.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: simple-line-icons.css, jquery.js
ANIMACIÓN CSS: ¿ADENTRO O AFUERA?
Autor
- Olivia
- 21 de abril de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS) / JavaScript
Sobre el código
Recientemente participé en un proyecto donde tuvimos que hacer animaciones. Usamos After Effects> JSON> algo de magia de complemento para él, pero me preguntaba si podría replicar exactamente el mismo efecto con CSS. – Olivia
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: simple-line-icons.css, jquery.js
CSS SOLO ANIMACIÓN DE BORDE
Autor
- Danny Joris
- 10 de abril de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Sobre el código
Animación de borde solo CSS en el desplazamiento. Necesita un fondo sólido para funcionar.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
CSS PURO SATURNO HULA HOOPING
Autor
- Jamie Coulter
- 24 de marzo de 2018
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS)
Sobre el código
Titán mira Saturno hula hoop! Una conversión de este gif a CSS puro: https://dribbble.com/shots/4252236-Saturn-Hula-Hooping
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
Dependencias: –
LLAMA LA ATENCIÓN LAS ANIMACIONES
Autor
- Jerry Jones
- 11 de septiembre de 2017
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS) / JavaScript (Babel)
Sobre el código
A veces quieres llamar la atención sobre un elemento en tu página. Algunos de estos son sutiles. Algunos de ellos no lo son.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
CUADRÍCULA DE PERSPECTIVA CON ANIMACIÓN
Autor
- Brian Haferkamp
- 18 agosto 2017
Enlaces
Hecho con
- HTML (Pug) / CSS (Sass) / JavaScript
Sobre el código
Esta galería utiliza el diseño de cuadrícula CSS y la perspectiva CSS3 para crear algo un poco único.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
ESPONJA CSS PURA
Autor
- Julia Muzafarova
- 30 de julio de 2017
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Responsivo: no
Dependencias: –
ANIMACIÓN CSS REVEAL
Autor
- Anthony Fessy
- 14 de marzo de 2017
Enlaces
Hecho con
- HTML / CSS (SCSS) / JavaScript
Sobre el código
Una animación CSS que revela el texto y la imagen con retraso / dirección.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: jquery.js
RESPLANDOR ANIMADO
Autor
- George Hastings
- 8 de enero de 2017
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Elemento Psuedo y animación de gradiente de fondo y desenfoque.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
DISEÑO GENIAL CON ANIMACIÓN COMPLEJA ENCADENABLE
Autor
- Nikolay Talanov
- 10 de julio de 2016
Enlaces
Hecho con
- HTML / CSS (SCSS) / JavaScript
Sobre el código
Basado en esto: https://dribbble.com/shots/2802024- Satellite – Website – Prototype . Basado en la adición de solo 2 clases con JS (y simple desplazamiento), esta demostración presenta muchas animaciones geniales de encadenamiento , combinadas con un buen rendimiento y una especie de SCSS fácil de mantener.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
PARQUE DE ATRACCIONES DISEÑO PLANO CON ANIMACIÓN CSS
Autor
- Vladimir Gashenko
- 23 de mayo de 2016
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Diseño plano Parque de atracciones animado con el poder de CSS3 puro.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN DE ONDAS CSS Y SVG
Autor
- Ted McDonald
- 29 de julio de 2015
Enlaces
Hecho con
- HTML / CSS (SCSS)
Sobre el código
Esta versión CSS3 es acelerada por hardware, simple y es mucho más eficiente.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN DE TARJETA MAGNÉTICA
Autor
- Michiel Bijl
- 11 de septiembre de 2014
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS)
Sobre el código
Tarjeta de animación de deslizamiento Diseño de materiales.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
DISEÑO DE MATERIAL DE ANIMACIÓN CSS
Autor
- Michiel Bijl
- 10 de septiembre de 2014
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS)
Sobre el código
Diseño de material HTML y CSS con animación.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
ICONOS ANIMADOS DE CARRO DE COMPRAS
Autor
- Joni Trythall
- 7 de mayo de 2014
Enlaces
Hecho con
- HTML / CSS / JavaScript
Sobre el código
Simplemente estoy experimentando con algunas animaciones SVG e interactividad para una «Tienda de frutas falsas».
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
BURBUJAS ANIMADAS DE CSS PURO
Autor
- Mark Bowley
- 21 de abril de 2014
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Burbujas animadas que usan nada más que HTML y CSS.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN CSS FLAME
Autor
- Adrian Payne
- 5 de octubre de 2013
Enlaces
Hecho con
- HTML / CSS
Sobre el código
Una llama animada que usa solo animaciones CSS3 y box-shadow. Quería ver si podía hacer fuego con solo CSS – ¡llama encendida!
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
ANIMACIÓN DE FIRMA
Autor
- Damian Drygiel
- 20 de septiembre de 2013
Enlaces
Hecho con
- HTML / CSS (Menos)
Sobre el código
CSS puro, animación de firma ligera . Sin animación GIF, solo secuencia PNG ligera (20 KB) animada con CSS3. Botón de animación ‘Repetir’ sin JS, CSS puro. Cambiar el color de la señal al pasar el mouse.
Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari
Dependencias: –
ESPIRAL NUBLADO
Autor
- Hakim El Hattab
- 3 de julio de 2013
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS)
Sobre el código
Animación CSS en espiral nublado.
Navegadores compatibles: Chrome, Firefox, Opera, Safari
Dependencias: –
