Opóźnienie animacji CSS między pętlami

Question

Próbujesz dostać etykietę z ceną klasy, aby przesunąć się w górę, a następnie ześlizgnąć się z powrotem za pomocą CSS.

Mam następujący -

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

widzę, że animacja zaczyna się w 4 sekundy, ale po jego uruchomieniu, tylko stale pętle w szybki sposób. Jak dodać 4-sekundowe opóźnienie pomiędzy każdą pętlą i zatrzymać się na 2 sekundy przy znaku 50%?

Answer 1

Zwiększ pętlę i dodaj więcej klatek kluczowych.

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