web-dev-qa-db-fra.com

Délai d'animation CSS entre les boucles

Essayer d'obtenir une étiquette avec le prix de la classe pour glisser vers le haut, puis vers le bas avec CSS.

J'ai ce qui suit -

-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;

@-webkit-keyframes slidingPrice {
  0% { opacity: 0; bottom: -30px; }
  50% { opacity: 1; bottom: 0; }
  100% { opacity: 0; bottom: -30px; }
}

Je vois que l'animation commence en 4 secondes, mais une fois qu'elle démarre, elle se boucle en continu de manière rapide. Comment ajouter un délai de 4 secondes entre chaque boucle et m'arrêter pendant 2 secondes à 50%?

cssanimationdelay
12
Yasir

Rallongez votre boucle et ajoutez plus d'images clés.

@-webkit-keyframes slidingPrice {
  0%     { opacity: 0; bottom: -30px; } /* 0ms initial values */
  2.38%  { opacity: 1; bottom: 0; }     /* 150ms half of animation */
  34.13% { opacity: 1; bottom: 0; }     /* 2150ms still at half of animation */
  36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
  100%   { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}

.price {
    -webkit-animation-name: slidingPrice;
    -webkit-animation-duration: 6300ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
}
18
Frambot