Está en la página 1de 8

Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

 Animaciones CSS

 Lenguaje CSS  CheatSheets  YouTube  Twitter

 Transiciones CSS Transformaciones CSS


  
Capítulo anterior Capítulo siguiente

Una vez conocemos las transiciones CSS  , es muy fácil adaptarnos


al concepto de animaciones de CSS, el cual amplia el concepto de
transiciones convirtiéndolo en algo mucho más �exible y potente.

Las transiciones son una manera de suavizar un cambio de un


estado inicial a un estado �nal. La idea de las animaciones CSS parte
del mismo concepto, permitiendo añadir más estados, pudiendo
realizar cambios desde un estado inicial, a un estado posterior, a
otro estado posterior, y así sucesivamente. Además, esto será
posible de forma automática, sin que el usuario tenga que realizar
una acción concreta.

El primer paso para crear animaciones es tener dos cosas claras.


Por un lado, utilizaremos la regla @keyframes, que incluye los
fotogramas de la animación. Por otro lado, tendremos que utilizar
las propiedades de las animaciones, que de�nen el
comportamiento de la misma.

Propiedades de animación CSS 

1 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

a de�nir dicho comportamiento necesitamos conocer las


  Introducción a CSS 
uientes propiedades, que son una ampliación de las transiciones
 ¿Qué es CSS?

 ¿Cómo usar CSS?

 Estructura de CSS 
Valor
 Minificar CSS

 Navegadores web
 none | nombre
 Niveles de CSS y prefijos
0| TIME
 Herencia en CSS

 Cascada en CSS  ease | linear | ease-in | ease-out | ease-in-out | cubic-


 Variables CSS bezier( A , B , C , D )
 CSS Properties Guide
0| TIME

  Modelo de cajas

| in�nite | NUMBER
 Unidades CSS

 Modelo de cajas
normal | reverse | alternate | alternate-reverse
 Márgenes y rellenos

 Bordes CSS none | forwards | backwards | both


 Esquinas redondeadas
running | paused
 Bordes con imágenes

 Funciones CSS

animation-name permite especi�car el nombre del


  Colores y fondos
grama a utilizar, mientras que las propiedades animation-
 Colores CSS animation-timing-function y animation-delay funcionan
 ctamente igual que en el tema anterior de transiciones.
Fondos en CSS

 Gradientes CSS

La propiedad animation-iteration-count permite indicar el número


  Selectores CSS
de veces que se repite la animación, pudiendo establecer un número
 concreto
Selectores CSS básicosde repeticiones o indicando infinite para que se repita

 continuamente.
Selectores CSS avanzados Por otra parte, especi�cando un valor en animation-
 Pseudoclases CSS conseguiremos indicar el orden en el que se reproducirán
 los fotogramas,
Pseudoclases CSS avanzadas pudiendo escoger un valor de los siguientes:

 Pseudoelementos CSS

2 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

  Introducción a CSS  Significado

 ¿Qué es CSS? Los fotogramas se reproducen desde el principio al �nal.



 ¿Cómo usar CSS?
Los fotogramas se reproducen desde el �nal al principio.
 Estructura de CSS 
 Minificar CSS
En iteraciones par, de forma normal. Impares, a la

 Navegadores web

inversa.

 Niveles de CSS y prefijos


iteraciones impares, de forma normal. Pares, normal.
En
 Herencia en CSS

 Cascada en CSS 
 Variables CSS
defecto, cuando se termina una animación que se ha indicado
 CSS Properties Guide
se reproduzca sólo una vez, la animación vuelve a su estado
  Modelo de cajas ). Mediante la propiedad animation-fill-
 Unidades CSS
podemos indicar que debe mostrar la animación cuando ha
lizado y ya no se está reproduciendo; si mostrar el estado inicial
 Modelo de cajas
), el estado �nal ( forwards ) o una combinación de ambas
 Márgenes y rellenos

 Bordes CSS

 Esquinas redondeadas
animation-play-state nos permite
 Bordes con imágenes
ablecer la animación a estado de reproducción ( running ) o
 Funciones CSS

  Colores y fondos

 Colores CSS
Atajo: Animaciones 
 Fondos en CSS

 Gradientes CSS
Nuevamente, CSS ofrece la posibilidad de resumir todas estas
propiedades
  Selectores CSS en una sola, para hacer nuestras hojas de estilos más
especí�cas. El orden de la propiedad de atajo sería el siguiente:
 Selectores CSS básicos

 Selectores CSS avanzados

 Pseudoclases CSS CSS


/* avanzadas
 Pseudoclases CSS animation: <name> <duration> <timing-function> <delay>
 Pseudoelementos CSS
<iteration-count> <direction> <fill-mode> <play-state> */

3 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

changeColor 5s linear 0.5s 4 normal forwards running


  Introducción a CSS 

 ¿Qué es CSS?

 ¿Cómo usar CSS?

 Estructura de CSS 
: Mucho cuidado al indicar los segundos en las
 Minificar CSS
ropiedades de duración.
 Al ser una unidad diferente a las que
 Navegadores web
px, em, etc... ) hay que especi�car siempre la s,
 Niveles de CSS y prefijos
unque sea un valor igual a 0.
 Herencia en CSS

 Cascada en CSS 
 Variables CSS
Fotogramas (keyframes) 
 CSS Properties Guide

  Modelo de cajas
sabemos como indicar a ciertas etiquetas HTML que reproduzcan
 Unidades CSS animación, con ciertas propiedades. Sin embargo, nos falta la

 te más importante: de�nir los fotogramas de dicha animación.


Modelo de cajas

 a ello utilizaremos la regla @keyframes, la cuál es muy sencilla de


Márgenes y rellenos

 Bordes CSS izar y se basa en el siguiente esquema:

 Esquinas redondeadas

 Bordes con imágenes

 Funciones CSS

  Colores y fondos

 Colores CSS

 Fondos en CSS

 Gradientes CSS

  Selectores CSS

 Selectores CSS básicos

 Selectores CSS avanzados

En primer
 Pseudoclases CSS lugar elegiremos un nombre para la animación ( el cuál
 utilizamos
Pseudoclases en el apartado anterior, para hacer referencia a la
CSS avanzadas

 animación,
Pseudoelementos CSS ya que podemos tener varias en una misma página ),

4 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

ntras que podremos utilizar varios selectores para de�nir el


  Introducción a CSS 
nscurso de los fotogramas en la animación.
 ¿Qué es CSS?

 mos algunos ejemplos:
¿Cómo usar CSS?

 Estructura de CSS 
 Minificar CSS
CSS
changeColor
 {
 Navegadores web
red; } /* Primer fotograma */
 Niveles de CSS y prefijos green; } /* Último fotograma */

 Herencia en CSS

 Cascada en CSS 
 Variables CSS

 CSS Properties Guide

  Modelo de cajas
changeColor 2s ease 0 infinite; /* Relaciona con @keyframes */
 Unidades CSS

 Modelo de cajas

 Márgenes y rellenos

 Bordes CSS este ejemplo nombrado changeColor, partimos de un primer


 grama en el que el elemento en cuestión será de color de fondo
Esquinas redondeadas

 . Si observamos el último fotograma, le ordenamos que termine


Bordes con imágenes

 Funciones CSSel color de fondo verde. Así pues, la regla @keyframes se


entará la animación intermedia para conseguir que el elemento
  Colores y fondos

 Colores CSS

 Fondos en CSS son realmente sinónimos de 0% y 100%, así


que
 Gradientes CSSlos modi�caremos y de esta forma podremos ir añadiendo
nuevos fotogramas intermedios. Vamos a modi�car el ejemplo
  Selectores CSS
anterior añadiendo un fotograma intermedio e indentando, ahora sí,
correctamente
 Selectores CSS básicos el código:
 Selectores CSS avanzados

 Pseudoclases CSS CSS


changeColor {
 Pseudoclases CSS avanzadas

 Pseudoelementos CSS

5 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

/* Primer fotograma */
  Introducción a CSS 

 ¿Qué es CSS?
yellow;
 /* Segundo fotograma */
 ¿Cómo usar CSS?

 Estructura de CSS 
 Minificar CSS ; /* Último fotograma */
 Navegadores web

 Niveles de CSS y prefijos

 Herencia en CSS

 Cascada en CSS 
 Variables CSS

 CSS Properties Guide


changeColor 2s ease 0 infinite; /* Relaciona con @keyframes */
  Modelo de cajas

 Unidades CSS

 Modelo de cajas

 Márgenes y rellenos
: Si tienes fotogramas que van a utilizar los mismos estilos
 Bordes CSS
ue uno anterior, siempre puedes separarlos con comas, por
Esquinas redondeadas

0%, 75% { ... }, que utilizarían dichos estilos al inicio
 e la animación y al 75% de la misma.
Bordes con imágenes

 Funciones CSS

  Colores y fondos

 Colores CSS
Encadenar animaciones 
 Fondos en CSS

EsCSS
 Gradientes posible encadenar múltiples animaciones, separando con comas
las animaciones individuales y estableciendo un tiempo de tardo a
  Selectores CSS
cada animación posterior:
 Selectores CSS básicos

 Selectores CSS avanzados


CSS
 Pseudoclases CSS

 Pseudoclases CSS avanzadas linear 0, /* Comienza a los 0s */


 Pseudoelementos CSS
linear 5s, /* Comienza a los 5s */

6 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

linear 7.5s, /* Comienza a los 7.5s (5 + 2.5) */


  Introducción a CSS 
linear 9.5s; /* Comienza a los 9.5s (5 + 2.5 + 2) */
 ¿Qué es CSS?

 ¿Cómo usar CSS?

 Estructura de CSS 
 Minificar CSS
este caso, lo que hemos hecho es aplicar varias animaciones a la

, pero estableciendo
Navegadores web
 un retardo ( cuarto parámetro ) que es la
a de la duración de las animaciones anteriores. De esta forma,
 Niveles de CSS y prefijos

adenamos una animación con otra.
 Herencia en CSS

 Cascada en CSS 
 Variables CSS

 CSS Properties Guide


Comparte en... 
  Modelo de cajas

 Unidades CSS
Transformaciones CSS
 
 Modelo de cajas Capítulo siguiente
 Márgenes y rellenos

 Bordes CSS

 Esquinas redondeadas

 Bordes con imágenes


Transformaciones ¿Qué es
 Funciones CSS
CSS PostCSS?
  Colores y fondos

 Colores CSS Publicado por Manz


 Fondos en CSS
Docente, divulgador informático y freelance.
 Gradientes CSS
Autor de Emezeta.com , es profesor en la
  Selectores CSS
Universidad de La Laguna y dirige el curso
de Programación web FullStack y Diseño
 Selectores CSS básicos web FrontEnd de EOI en Tenerife
 Selectores CSS avanzados (Canarias). En sus ratos libres, busca GIF de
gatos en Internet.
 Pseudoclases CSS

 Pseudoclases CSS avanzadas


    
 Pseudoelementos CSS

7 de 8 6/10/20 4:28 p. m.


Animaciones CSS - CSS en español https://lenguajecss.com/css/animaciones/animaci...

Twitter Linkedin GitHub CodePen YouTube


  Introducción a CSS 

 ¿Qué es CSS?

¿Quieres compartir tu opinión?
 ¿Cómo usar CSS?

 Estructura de CSS 
 Minificar CSS Lenguaje CSS
 Navegadores web

Documentación
 Niveles de CSS y prefijos sobre CSS y las mejores herramientas y

recursos para aprender a utilizar el lenguaje de estilos
 Herencia en CSS
CSS (Hojas de estilo).
 Cascada en CSS 
 Variables CSS
Creado y mantenido por @Manz con 


 CSS Properties Guide

  Modelo de cajas

con sirope de nata. TTFB 1247ms


 Unidades CSS

 Modelo de cajas

 Márgenes y rellenos

 Bordes CSS

 Esquinas redondeadas

 Bordes con imágenes

 Funciones CSS

  Colores y fondos

 Colores CSS

 Fondos en CSS

 Gradientes CSS

  Selectores CSS

 Selectores CSS básicos

 Selectores CSS avanzados

 Pseudoclases CSS

 Pseudoclases CSS avanzadas

 Pseudoelementos CSS

8 de 8 6/10/20 4:28 p. m.

También podría gustarte