कीफ्रेम एनीमेशन - त्वरित परिवर्तन

Question

मैंने CSS3 में कीफ्रेम एनीमेशन के बारे में जानना शुरू कर दिया है। एक विचार मैंने देखा है कि, कोई फर्क नहीं पड़ता कि मैं keyframe एनिमेशन के साथ "" समय "चीजें कैसे करता हूं, संक्रमण हमेशा चिकनी होते हैं।

उदाहरण के लिए; 50% से 100% तक पृष्ठभूमि रंग परिवर्तन, एक चिकनी संक्रमण है के रूप में एनीमेशन फिर 100% से 50% से निभाता है।

क्या मैं प्राप्त करने के लिए कोशिश कर रहा हूँ मूल्य परिवर्तन का एक "त्वरित" प्रकार के साथ एनीमेशन करने का एक तरीका है ..

, एक उदाहरण होगा : यदि बीजी का 50% मूल्य लाल है और बीजी का 100% मूल्य नीला है; एनीमेशन 100% तक पहुंचने तक लाल रहना चाहिए और 100% पूर्ण होने पर तत्काल नीले रंग में बदलना चाहिए।

मुझे यकीन नहीं है कि मेरी शब्दावली सही है या गलत है, लेकिन कुछ दिशा किसी भी मामले में सही होगी।

Answer 1

आप अगले फ़्रेम तक एनीमेशन को रोकने के लिए अपने समय-समारोह के रूप में उपयोग कर सकते हैं steps

सीएसएस:

-webkit-animation-timing-function: steps(1, end); 
    -moz-animation-timing-function: steps(1, end); 
    -ms-animation-timing-function: steps(1, end); 
    -o-animation-timing-function: steps(1, end); 
    animation-timing-function: steps(1, end); 

नमूना कोड:

@keyframes quick { 
    0% { 
     background-color:green; 
    } 
    50% { 
     -webkit-animation-timing-function: steps(1, end); 
     -moz-animation-timing-function: steps(1, end); 
     -ms-animation-timing-function: steps(1, end); 
     -o-animation-timing-function: steps(1, end); 
     animation-timing-function: steps(1, end); 
     background-color:blue; 
    } 
    100% { 
     background-color:red; 
    } 
} 
@-o-keyframes quick { 
    0% { 
     background-color:green; 
    } 
    50% { 
     -o-animation-timing-function: steps(1, end); 
     background-color:blue; 
    } 
    100% { 
     background-color:red; 
    } 
} 
@-moz-keyframes quick { 
    0% { 
     background-color:green; 
    } 
    50% { 
     -moz-animation-timing-function: steps(1, end); 
     background-color:blue; 
    } 
    100% { 
     background-color:red; 
    } 
} 
@-webkit-keyframes quick { 
    0% { 
     background-color:green; 
    } 
    50% { 
     -webkit-animation-timing-function: steps(1, end); 
     background-color:red; 
    } 
    100% { 
     background-color:blue; 
    } 
} 
body { 
    height:100%; 
    width:100%; 
    animation:quick 3s; 
    -moz-animation:quick 3s; 
    -webkit-animation:quick 3s; 
    -o-animation:quick 3s; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

http://jsfiddle.net/sC5fy/1/

Answer 2

एक बहुत आसान समाधानजोड़ सकता है अपने तत्व को, और फिर, @keyframes खंड में:

%0 { 
    background-color: blue; 
} 

यह प्रयास करें: jsFiddle

Answer 3

मैं बस उसके बाद फिर से ठीक पहले इस समस्या थी और शुरू में प्रारंभिक मूल्य चिह्नित करके दौर समझ में आ गया और मैं चाहता था कि परिवर्तन तुरंत हो -

@-webkit-keyframes image2 { 
    0% {opacity: 1;} 
    24.99% {opacity: 1;} 
    25% {opacity: 0;} 
    100% {opacity: 0;} 
}