लूप के बीच सीएसएस एनीमेशन विलंब

Question

कक्षा मूल्य के साथ लेबल प्राप्त करने का प्रयास करने के लिए, फिर सीएसएस के साथ नीचे स्लाइड करें।

मैं निम्नलिखित है -

-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 सेकंड देरी कैसे जोड़ूं और 50% अंक पर 2 सेकंड के लिए रुक जाऊं?

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