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

Question

Попытка получить ярлык с ценой класса для продвижения вверх, а затем свернуть вниз с помощью 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%?

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