Una animación es un efecto que permite a un elemento cambiar de un estilo inicial a otro final gradualmente.
—Proceso:
Animaciones

Propiedades de la Animación

 

Propiedad Descripción
@keyframes Especifica la animación
animation Una propiedad resumida de todos los las propiedades de animación, excepto la propiedad de animación-play-estado
animation-name Especifica el nombre de la animación de fotogramas clave @
animation-duration Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo. Predeterminado 0
animation-timing-function Describe cómo la animación progresará más de un ciclo de su duración. Default "facilidad"
animation-delay Especifica cuando la animación se iniciará. Predeterminado 0
animation-iteration-count Especifica el número de veces que se reproduce una animación. Predeterminado 1
animation-direction Especifica si la animación debe realizarse a la inversa en ciclos alternos. Por defecto "normal"
animation-play-state Especifica si la animación está en ejecución o en pausa. Default "en ejecución"

 

EjemploEjemplo 1

Observa el cambio de color de la caja

Estilos CSS3 Código HTML

 
  1. /*Animaciones*/
  2. .Animacaja1
  3. {
  4. width:100px;
  5. height:100px;
  6. background:red;
  7. -webkit-animation:prueba 5s infinite;
  8. -moz-animation:prueba 5s infinite;
  9. animation:prueba 5s infinite;
  10. }
  11.  
  12. @-webkit-keyframes prueba
  13. {
  14. from {background:red;}
  15. to {background:yellow;}
  16. }
  17. @keyframes prueba
  18. {
  19. from {background:red;}
  20. to {background:yellow;}
  21. }
<div class="Animacaja1"></div>
 
 
 

 

EjemploEjemplo 2

 

Código CSS3 Código HTML

 
  1. @-webkit-keyframes girar {
  2. from,0% {
  3. -webkit-transform: scale(1) rotate(0deg);
  4. -moz-transform: scale(1) rotate(0deg);
  5. transform: scale(1) rotate(0deg); }
  6. 100% ,to{
  7. -webkit-transform: scale(1.5)rotate(600deg);
  8. -moz-transform: scale(1.5)rotate(600deg);
  9. transform: scale(1.5)rotate(600deg);
  10. }
  11. }
  12. @keyframes girar {
  13. from,0% {
  14. -webkit-transform: scale(1) rotate(0deg);
  15. -moz-transform: scale(1) rotate(0deg);
  16. transform: scale(1) rotate(0deg); }
  17. 100% ,to{
  18. -webkit-transform: scale(1.5)rotate(600deg);
  19. -moz-transform: scale(1.5)rotate(600deg);
  20. transform: scale(1.5)rotate(600deg);}
  21. }
  22. .Animarueda1{
  23. position: relative;
  24. width: 50px;
  25. height:50px;
  26. border-radius: 50%;
  27. -webkit-animation-name: girar;
  28. -webkit-animation-duration: 2s;
  29. -webkit-animation-iteration-count: infinite;
  30. -webkit-animation-direction: alternate;
  31.  
  32. -moz-animation-name: girar;
  33. -moz-animation-duration: 2s;
  34. -moz-animation-iteration-count: infinite;
  35. -moz-animation-direction: alternate;
  36.  
  37. animation-name: girar;
  38. animation-duration: 2s;
  39. animation-iteration-count: infinite;
  40. animation-direction: alternate;
  41.  
  42.  
  43. text-align: center;
  44. display: table-cell;
  45. vertical-align: middle;
  46. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  47. color: #FFFFFF;
  48. background-color: #CC99FF;
  49. border-top-style: none;
  50. border-right-style: none;
  51. border-bottom-style: none;
  52. border-left-style: none;
  53. font-size: 18px;
  54. }
<div class="Animarueda1">CSS3</div>
 
CSS3
  

 

Saber másPara saber más

Amplia esta información en:

  1. https://www.w3schools.com