CSS3 एनीमेशन में कुछ कीफ्रेम पर कैसे स्थानांतरित करें?

Question

मान लीजिए कि हम यहाँ की तरह एक एनीमेशन करते हैं: http://jsfiddle.net/utterstep/JPDwC/

लेआउट:

<div>back</div> 
<div class="animating"></div> 
<div>forward</div> 

और इसी सीएसएस:

@keyframes someanimation { 
    0% { 
     width: 100px; 
    } 
    50% { 
     width: 200px; 
    } 
    100% { 
     width: 100px; 
    } 
} 

.animating { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    animation: someanimation 5s infinite; 
} 

और मैं जब मैं अगले या पिछले एनीमेशन राज्य में जाना चाहते हैं वापस या आगे दबाएं। एक से अधिक ऑब्जेक्ट हो सकते हैं और मैं एक ही समय में अपने एनीमेशन राज्यों को स्विच करना चाहता हूं।

क्या यह सीएसएस या सीएसएस + जेएस के माध्यम से कुछ संभव है, या शायद मेरे लिए शुद्ध-जेएस में मेरे कोड को फिर से लिखना आसान होगा? (वर्तमान में मैं इस विचार पसंद नहीं है, क्योंकि मैं चेतन करने के लिए संपत्तियों की एक बहुत कुछ है और सीएसएस यह बहुत ज्यादा आसान मेरे लिए बनाता है)

Answer 1

शायद आप सीएसएस + जे एस में जवाब

Old Post

देखें मिल गया है एक ही पोस्ट Fiddle

और सीएसएस केवल यहाँ के साथ से बेला पर

यहाँ Fiddle मैं :hover संपत्ति के साथ बदलाव किया है,

है यह हॉवर पर एनीमेशन बदल जाता है, बस बटन

.. मुझे आशा है कि इस उद्देश्य का समाधान होगा