web-dev-qa-db-fra.com

Animation de rebond en douceur CSS

J'avais besoin d'implémenter un effet de rebond infini en utilisant du CSS pur. J'ai donc fait référence à this site et j'ai fini par le faire this .

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

#animated-example {
    width: 20px;
    height: 20px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 50%;
}

hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>

Maintenant, mon seul problème est que l’élément qui rebondit prend un temps de repos plus long avant de recommencer à rebondir. Comment puis-je le faire rebondir en douceur tout comme l’effet de rebond obtenu en utilisant jQuery.animate?

csscss3css-animations
17
Abhi

Le long repos entre les deux est dû aux paramètres de votre image clé. Les règles actuelles de votre image clé signifient que le rebond réel ne se produit qu'entre 40% et 60% de la durée de l'animation (c'est-à-dire entre 1 et 1,5 seconde de l'animation). Supprimer ces règles et peut-être même réduire le animation-duration pour répondre à vos besoins.

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
#animated-example {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}
hr {
  position: relative;
  top: 92px;
  left: -300px;
  width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>

Voici comment vos paramètres d'origine keyframe seraient interprétés par le navigateur:

  • À 0% (c'est-à-dire à 0s ou au début de l'animation) - translate de 0px dans l'axe des ordonnées.
  • À 20% (c'est-à-dire à 0,5 seconde d'animation) - translate par 0 pixels dans l'axe des ordonnées.
  • À 40% (c'est-à-dire à 1 s d'animation) - translate de 0px dans l'axe des ordonnées.
  • À 50% (c'est-à-dire, à 1,25 s de l'animation) - translate par 5 pixels sur l'axe des ordonnées. Cela se traduit par un mouvement ascendant graduel.
  • À 60% (c'est-à-dire à une animation de 1,5 s) - translate par 0 pixels sur l'axe des ordonnées. Cela se traduit par un mouvement progressif à la baisse.
  • À 80% (c'est-à-dire à l'animation de 2s) - translate de 0px dans l'axe des ordonnées.
  • À 100% (c'est-à-dire à 2,5 secondes ou à la fin de l'animation) - translate par 0 pixels sur l'axe des ordonnées.
38
Harry

Voici le code n'utilisant pas le pourcentage dans les images clés. Parce que vous avez utilisé des pourcentages, l'animation ne fait rien longtemps.

  • 0% traduisent 0px
  • 20% traduisent 0px
  • etc.

Comment fonctionne cet exemple:

  1. Nous définissons un animation. Ceci est un raccourci pour les propriétés d'animation.
  2. Nous commençons immédiatement l’animation car nous utilisons from et to dans les images clés. de is = 0% et to = 100%
  3. Nous pouvons maintenant contrôler la vitesse de rebond en réglant le temps d'animation: animation: bounce 1s infinite alternate; le 1 est la durée de l'animation.
.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
<div class="ball"></div>
16
Persijn

Si vous utilisez déjà la propriété de transformation pour positionner votre élément (comme je le suis actuellement), vous pouvez également animer la marge supérieure:

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -15px;
  }
}
1
GerritElbrink