animaciones avanzadas css
Ideakreativa cuenta con el apoyo de su audiencia. Cuando compras a través de enlaces en nuestro sitio, podemos ganar una comisión de afiliado sin costo adicional para ti. Como Asociado de Amazon, ganamos con las compras calificadas. Aprende más

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:active:target.

Hay cuatro propiedades relacionadas con la transición en total, incluidas transition-propertytransition-durationtransition-timing-functiontransition-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:

  1. 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.
  2. 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.
  3. Define la animación: Utiliza la propiedad animation para especificar la duración, el retraso, el tipo de animación y otros ajustes. Puedes usar la función @keyframes para definir los puntos clave de la animación y cómo cambian las propiedades a lo largo del tiempo.
  4. Aplica la animación al elemento: Utiliza la propiedad animation-name y 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

Efectos CSS3 avanzadas
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas
Efectos CSS3 avanzadas

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

Imagen de demostración: Books Hover Animation

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

Imagen de demostración: 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

Imagen de demostración: 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?

Imagen de demostración: Animación CSS: ¿dentro o fuera?

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

Imagen de demostración: CSS Only Border Animation

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

Efectos CSS3 avanzadas: CSS Reveal Animation

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

Efectos CSS3 avanzadas: Resplandor animado de fondo

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

Efectos CSS3 avanzadas: 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

Efectos CSS3 avanzadas: Parque de atracciones Flat Design 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

Efectos CSS3 avanzadas: 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

Efectos CSS3 avanzadas: Card Swipe Animation
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: Diseño de material de animación CSS
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: iconos animados del carrito de compras
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: Pure CSS Animated Bubbles
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: CSS Flame Animation
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: animación de firma
Efectos CSS3 avanzadas

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

Efectos CSS3 avanzadas: Espiral nublado
CSS3 avanzadas

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: –

Resumen
39 ejemplos de animación CSS3 vanzadas
Artículo
39 ejemplos de animación CSS3 vanzadas
Descripción
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.
Autor
Publicación
Ideakreativa
Logo
Productos destacados
Artículos relacionados para diseñadores

Publicaciones Similares