Задержка анимации CSS между циклом

попытка получить метку с ценой класса, чтобы скользить вверх, а затем скользить вниз с помощью CSS.

У меня есть следующее --

-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; }
}

Я вижу, что анимация начинается через 4 секунды, но как только она начинается, просто непрерывно петляет быстрым способом. Как добавить 4-секундную задержку между каждым циклом и остановиться на 2 секунды на отметке 50%?

12
animation css delay

1 ответов

сделайте цикл длиннее и добавьте больше ключевых кадров.

@-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;
}
17