Cómo hacer animaciones en CSS3

by Silvia Mazzetta Date: 01-06-2020 css3 animaciones html5

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener cuantos estados se necesiten en medio del estado inicial y el estado final, ofreciendo un mayor control de cómo los estados son animados. Mientras una transición se mueve de un estado A a un estado B, una animación puede moverse de A, B, C a D. O puede tener la cantidad de estados que necesite. Las animaciones pueden lograr este comportamiento utilizando una colección de keyframes. Mientras una transición puede ser especificada con una línea de de código en una clase, una animación requiere un conjunto de keyframes que son descritos separados de la clase.

Para crear animaciones debemos tener dos cosas claras.

  1. La regla @keyframes, que incluye los fotogramas de la animación
  2. Las propiedades CSS de las animaciones que definen el comportamiento de la misma

Subpropriedades de "Animation"

PROPRIEDAD VALOR
animation-name none | nombre
animation-duration 0 | Tiempo (sec)
animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(A, B, C, D)
animation-delay 0 | Tiempo (sec)
animation-iteration-count running | paused
animation-direction normal | reverse | alternate | alternate-reverse Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final
animation-fill-mode none | forwards | backwards | both Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
animation-play-state 0 | Tiempo (sec)

Sintaxis

div {
/* animation: <name> <duration>
<timing-function> <delay> <iteration-count>
<direction> <fill-mode> <play-state> */
animation: changeColor 5s linear 0.5s 4 normal
forwards running;
}

Los Keyframes / fotogramas

  • Cada fotograma indica cómo se muestra cada elemento animado en un momento dado de la animación.
  • Keyframe usa percentage para indicar en qué momento de la secuencia la animación tiene lugar. Va de 0% a 100%.
  • Utilizamos FROM y TO para especificar al navegador los momentos

Ejemplo 1: desplazar un cuadrado

.cuadrado {
width: 200px;
height: 200px;
background: red;
position: relative;
animation: animacuadrado 5s infinite;
}
@keyframes animacuadrado {
from {left: 0px;}
to {left: 200px;}
}

Ejemplo 2: animar el cuadrado con cambio de colores

@keyframes animacuadrado {
0%   {top: 0px; background: red; width: 200px;}
100% {top: 300px; background: yellow; width: 300px;}
}

Ejemplo 3: cuadrado que se mueve alrededor de la pantalla (4 lados)

@keyframes animacuadrado {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}

Ejemplo 4 : el cuadrado que rebota / bounce

.cuadrado {
width: 200px;
height:200px;
padding: 20px;
background: red;
position: relative;
animation: animacuadrado 1s ease-in 2s infinite alternate;
}
@keyframes  animacuadrado{
from {
top: 0px;
left: 0px;
}
to {
top: 150px;
left: 150px;
}
}

Ejemplo 5: cuadrado con sombra on hover

.cuadrado {width:100px; height:100px; background:red}
.cuadrado:hover{ animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 1s 1 alternate both;} 
@keyframes bouncing{
0% { bottom: 0; box-shadow: 0 0 5px #000;}
100%{ bottom: 50px; box-shadow: 0 50px 50px #000; }
}

Ejemplo 6: cambiamos el background

<div class="fondo"></div>
<style>
html,
body {
height: 100%;
}  
.fondo {
width: 100%;
height: 100%;
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
</style>

Ejemplo 7: cuadrado que se vuelve circulo infinito y se estrecha

<style>
body,
html {
height: 100%;
}  
body {
display: flex;
align-items: center;
justify-content: center;
}
.cuadrado {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s; 
animation-timing-function: ease-out; 
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}  
</style>

Ejemplo 8:  texto slide in

h1 {  
animation-name: slidein;
animation-duration: 3s;
}  
@keyframes slidein {
from {
margin-left: 100%;
width: 300%
}to {  
margin-left: 0%;
width: 100%;
}
}
<h1>Este es mi título</h1>

Ejemplo 9 : el fantasma ;-)

<div class="container">
<img src="ghost.svg" class="ghost" />   
</div>  
<style>
body { background-color: #ff4814; }
.container { position:relative; margin:0 auto; max-width:600px; }
.ghost { animation: float 3s ease-out infinite;  }
@keyframes float { 
50% {
transform: translate(0, 20px); } 
}
</style>

Ejemplo 10 : bola que rebota

body {
display: flex;
justify-content: center;
}.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from { transform: translate3d(0, 0, 0);     }
to   { transform: translate3d(0, 200px, 0); }
}
}


Abstract vector created by freepik - www.freepik.com

 
by Silvia Mazzetta Date: 01-06-2020 css3 animaciones html5 visitas : 6665  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para…

Que son y Como funcionan las medidas VH y VW de CSS3

  Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Hoy vamos a conocer…

Plugins jQuery para Efectos de Transición de Páginas con CSS3

Todo el mundo sabe que si desea más tráfico en su sitio web y quiere estar en la cima de los resultados de búsqueda también debe tener la página web…

15 increíbles tutoriales para generar efectos de texto con CSS3

Normalmente para añadir efectos sobre textos utilizamos algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces podemos conseguir efectos realmente impresionantes tan solo aplicando algo de…

8 útiles herramientas para optimizar CSS

La optimización es una parte fundamental del desarrollo y mantenimiento de un sitio web, algo que a menudo, por falta de tiempo, se nos olvida. La optimización de una web es…

25 Tutoriales CSS3 para efectos avanzados de interfaz de usuario

En este artículo os presentaremos una lista de 25 excelentes tutoriales css3 a través de los cuales podráis aprender los trucos CSS3 de las interfaces avanzadas. 1. Interactive Infographic with SVG…

Clicky