html5 - poner - Cómo jugar transiciones CSS3 en un bucle?

transition css hover

Question

El siguiente estilo es solo un ejemplo de cómo establecer transiciones en CSS3.
¿Hay un truco puro de CSS para hacer este juego en loop?

div {
    width:100px;
    height:100px;
    background:red;
    transition:width 0.1s;
    -webkit-transition:width 0.1s; /* Safari and Chrome */
    -moz-transition:width 0.1s; /* Firefox 4 */
    -o-transition:width 0.1s; /* Opera */
    transition:width 0.1s; /* Opera */
}

div:hover {
    width:300px;
}

Answer 1

Las transiciones CSS solo se animan de un conjunto de estilos a otro; lo que estás buscando son animaciones CSS .

Debe definir los fotogramas clave de animación y aplicarlos al elemento:

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Revisa el enlace de arriba para descubrir cómo personalizarlo a tu gusto, y tendrás que agregar prefijos de navegador.