Css, cosas útiles

Animaciones con @keyframes

Con esta etiqueta podemos indicar una progresión automática de cambio de valores en uno o varios parámetros. Con el @keyframe creamos la secuencia, indicando desde qué valor comienza hasta cual acaba. Y con animation-name, le decimos a que le aplicamos dicha secuencia.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

También se pueden hacer pasos intermedios con cadencias más complejas indicando en cada porción del tiempo asignado que tiene que hacer.

@keyframes slidein {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}