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
?
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:
translate
de 0px dans l'axe des ordonnées.translate
par 0 pixels dans l'axe des ordonnées.translate
de 0px dans l'axe des ordonnées.translate
par 5 pixels sur l'axe des ordonnées. Cela se traduit par un mouvement ascendant graduel.translate
par 0 pixels sur l'axe des ordonnées. Cela se traduit par un mouvement progressif à la baisse.translate
de 0px dans l'axe des ordonnées.translate
par 0 pixels sur l'axe des ordonnées.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.
Comment fonctionne cet exemple:
animation
. Ceci est un raccourci pour les propriétés d'animation.from
et to
dans les images clés. de is = 0% et to = 100%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>
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;
}
}