Animación de Planeta y luna rotando CSS3

Para ver en youtube click aquí
Para ir a mi canal click aquí (No olvides suscribirte)
Para ver una lista de reproducción de tutoriales CSS3 click aquí

Sobre "linear"

  Este es uno de los valores que podemos definir en nuestra propiedad "animation", si queremos definir este parámetro de forma independiente debemos usar la propiedad "animation-timing-function" y podemos darle los siguientes valores :

• linear : La animación tiene la misma velocidad desde el inicio hasta el final
• ease  : Empieza lento, luego acelera la velocidad y antes del final, lento nuevamente
• ease-in : Comienza lentamente
• ease-out : Termina lentamente
• ease-in-out: Comienza y termina lentamente
• steps(int, start|end) : Permite personalizar, hasta cierto punto la velocidad, el primer parametro es la cantidad de intervalos y el segundo es donde ocurrirá el cambio de velocidad, al inicio (start) o al final (end)
• step-start : Equivalente a colocar steps(1, start)
• step-end : Equivalente a colocar steps(1, end);
• cubic-bezier(n,n,n,n) : Permite personalizar completamenta la función de tiempo, a continuación te enseño a establecer los valores

Función cubic-bezier

  Se le deben pasar 4 parámetros numéricos que describen una "curva de bezier" sigue este enlace para saber lo que es :

http://adf.ly/1cuY4q

  Definir sus parametros de forma manual es un poco dificil, por suerte tenemos este sitio web en donde podemos crear visualmente nustra propia curva :

http://adf.ly/1cuY6D

Acerca de los enlaces: Tienen un pequeño anuncio publicitario, esto lo hago para poder tener un mejor apoyo y así poder seguir produciendo más material como este, si te parecen muy molestos, escríbeme en los comentarios y yo buscaré una mejor forma de trabajar. Luego de hacer clic en ellos debes hacer clic en donde dice: "Saltar publicidad"

Código fuente del tutorial

.tierra {
   position: absolute;
   width: 100px;
   height: 100px;
   background-image: url('tierra.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 50px;
   left: 350px;
   animation: rotartierra 2s infinite linear;
  }
  .luna {
   position: absolute;
   width: 25px;
   height: 25px;
   background-image: url('luna.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 80px;
   left: 250px;
   animation: rotarluna 2s infinite linear, traslacion1 3s infinite linear, traslacion2 3s infinite linear;
  }

  @keyframes rotartierra {
  from {
   background-position: 0px;
  }
  to {
   background-position: 200px;
  }
  }

  @keyframes
  rotarluna {from {
   background-position: 0%;
  }
  to {
   background-position: 200%;
  }
  }

  @keyframes traslacion1 {
  0%{
  left: 250px;
  z-index: 2;
  }
  49%{
  z-index: 2;
  }
  50%{
  left: 550px;
  z-index: -3;
  }
  99%{
  z-index: -3;
  }
  100%{
  left: 250px;
  z-index: 2;
  }
  }

  @keyframes traslacion2{
  0%{
   width: 35px;
   height: 35px;
  }
  15%{
   width: 50px;
   height: 50px;
  }
  35%{
   width: 50px;
   height: 50px;
  }
  50%{
            width: 35px;
   height: 35px;
  }
  65%{
   width: 25px;
   height: 25px;
  }
  85%{
   width: 25px;
   height: 25px;
  }
  100%{
   width: 35px;
   height: 35px;
  }
  }

Imagenes para descargar

En el siguiente enlace podrás descargar las imágenes de la superficie lunar y el mapa mundi de la tierra, ambas están en un archivo de winrar así que solo tienes que descargar un archivo, dentro de él están las dos imágenes:

https://drive.google.com/open?id=0B1iGBZlMDbzbRjdPR0pnTjFBNTA