En este tutorial te voy a enseñar como puedes crear una animación con CSS. Además, vamos a conocer todas las subpropiedades y subvalores que la propiedad animation nos permite trabajar.
Definir nuestra animación con CSS
Utilizando @keyframes
Mediante la regla @keyframes estableceremos los fotogramas o pasos de nuestra animación con CSS. Cada uno de estos fotogramas definirá cómo se muestra la animación en cada momento de la secuencia. Estos dos momentos se definen mediante las órdenes from y to , y con ello, le indicaremos al navegador los momentos en los cuales comenzar y acabar. Existe la posibilidad de añadir fotogramas como pasos intermedios situados entre estos dos, como veremos más adelante.
Para generar la secuencia de animación, usamos la propiedad animation, con ella configuramos todos los detalles de la secuencia. Dentro de animation, tenemos las subpropiedades que se encargan de definir todos los detalles de ésta, así tenemos los comandos delay, direction, duration, iteration-count, name, play-state, timing-function y fill-mode.
Con este código estamos creado un objeto que cambiará de color. Esto se define con la regla @keyframes. En el ejemplo vamos animar o cambiar la propiedad background pero podríamos trabajar con width, margin, color, etc…
Mientras que con animation-name, animation-duration, animation-count:infinite. Definimos qué animación debemos aplicar, la duración y las veces que se reproduce esta animación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#element_1{ display: inline-block; width: 150px; height: 150px; border-radius: 100%; animation-name:cambiaColor; animation-duration: 3s; animation-iteration-count:infinite; } @keyframes cambiaColor { from{ background: #68C5DB; } to{ background: #02182B; } } |
Código resumido
En lugar de utilizar animation-name, animation-duration y animation-iteration-count. Sólo vamos a utilizar animation.
También podemos utilizar 0% y 100% en lugar de utilizar from y to. Vamos a trabajar con porcentajes porque luego vamos a añadir más fotogramas o estados a nuestra animación.
|
1 2 3 4 5 6 7 8 |
#element_1{ animation: cambiaColor 3s infinite; } @keyframes cambiaColor { 0%{ background: #68C5DB; } 100%{ background: #02182B; } } |
Modificando nuestra animación con CSS
Ahora vamos a añadir un nuevo frame o estado en nuestra animación; cambiaremos el color del fondo a amarillo, vamos editar el valor animation-direction para que la animación retroceda una vez acabe y no se vea ese pequeño salto, y por último, añadiremos un pequeño delay a nuestra nueva animación tresColores
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#element_2{ display: inline-block; width: 150px; height: 150px; border-radius: 100%; animation:tresColores 3s 1s infinite alternate; line-height:150px; color:#fff; } @keyframes tresColores{ 0%{ background: #68C5DB } 50%{background: #02182B} 100%{background: yellow} } |
En el código de arriba: animation:tresColores 3s 1s infinite alternate; «3s» corresponde a la duración de la animación y 1s corresponde al retardo que aplicamos. El valor duración debe ir siempre antes. Con alternate hacemos que nuestra animación retroceda una vez acaba.
Además hemos añadido un nuevo estado en la mitad de la animación con el valor 50%.
Combinar 2 animaciones css
Con una animación podemos modificar múltiples propiedades y también podemos combinar varias animaciones. En este ejemplo vamos a modificar el margen superior de nuestro elemento:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#element_3{ display: inline-block; width: 150px; height: 150px; border-radius: 100%; animation: tresColores 3s infinite alternate, desplazar 3s 15 ease-in-out forwards alternate; line-height:150px; color:#fff; } @keyframes desplazar{ 0%{transform:translateX(0px)} 25%{transform:translateX(50px)} 50%{transform:translateX(20px)} 100%{transform:translateX(120px)} } |
En este ejemplo, dentro de la propiedad animation, hemos separado por una coma cada una de las animaciones. Además hemos creado la nueva animación llamada desplazar que tiene cuatro frames o estados: 0%, 25%, 50% y 100%. En cada uno de estos estados transformamos el objeto.
Importante:
En la animación desplazar el valor 15 y el valor forwards corresponden a animation-iteration-count y a animation-fill-mode. Por eso la animación se reproduce sólo quince veces y una vez que termina no se reinicia a la posición inicial.
Crear una animación en CSS para varias propiedades
En el ejemplo anterior hemos visto que podemos utilizar varias animaciones. Ahora vamos a ver cómo podemos modificar varias propiedades con una animación. Por ejemplo, en este caso vamos a modificar la posición y los colores al mismo tiempo. En el tercer frame no vamos a editar la propiedad background.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#element_4{ display: inline-block; width: 150px; height: 150px; border-radius: 100%; animation: colorMovimiento 4s infinite alternate; line-height:150px; color:#fff; } @keyframes colorMovimiento{ 0%{transform:translateX(0px);background:#099AF4} 25%{transform:translateX(50px)} 50%{transform:translateX(20px); background:#448FA3} 100%{transform:translateX(120px);background:#02182B} } |
Listado de las subpropiedades de animation
Antes de continuar haciendo más compleja nuestra animación con CSS, te voy a dejar un resumen de todas las subpopiedades y subvalores con los que podemos trabajar .
animation-name: Declaramos el nombre de la aniamación definida con @keyframes a manipular.animation-duration: La duración de la animacion CSS. Ejemplo: 3 segundos sería «3s».animation-timing-function: Definimos la curva de aceleración de la animación. El valor por defecto el linear. Tenemos estos valoresease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n).animation-delay: El retardo o el tiempo que tardará en comenzar la animación.animation-direction: La dirección de la animación que tendrá una vez haya acabado, por defecto empezará desde el principio pero si añadimos el valoralternatela animación comienza por el final. Si no se reiniciará.animation-iteration-count: El número de veces que se reproducirá. Podemos utilizar un número o el valorinfinite.animation-fill-mode: Valor o estado a aplicar después que acabe la animación. Podemos resetear el objeto o que el objeto tenga la apariencia que tenía al final de la animación. Valoresnone | forwards | backwards | both | initial | inherit;
0 comentarios
Trackbacks/Pingbacks