web-dev-qa-db-fra.com

Comment jouer aux transitions CSS3 dans une boucle?

Le style suivant est juste un exemple de la façon de définir des transitions en CSS3.
Existe-t-il une astuce CSS pure pour faire ce jeu en boucle?

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;
}
html5css3stylesheettransform
46
user1327073

Les transitions CSS n'animent qu'un ensemble de styles; ce que vous cherchez, c'est animations CSS .

Vous devez définir les images clés d'animation et les appliquer à l'élément:

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

  to {
    width: 300px;
  }
}

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

Consultez le lien ci-dessus pour savoir comment le personnaliser à votre guise, et vous devrez ajouter des préfixes de navigateur.

83
freejosh

Si vous souhaitez tirer parti de la fluidité 60FPS offerte par la propriété "transform", vous pouvez combiner les deux éléments suivants:

@keyframes changewidth {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(2);
  }
}

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

Plus d'explications sur les raisons pour lesquelles transform offre des transitions plus douces ici: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

0
Lucas