html5 - CSS translate animation resets to starting position -

<पूर्व> .card {& amp;: hover {.card_content_icon {@ अनुवाद में शामिल करें X (50px ); }}। Card_content {स्थिति: रिश्तेदार; पाठ संरेखित करें: केंद्र; मार्जिन: 0 ऑटो; .card_content_icon {स्थिति: रिश्तेदार; @ संक्रमण को शामिल करें (- WEBKIT-transform .6s); }}}

तत्व की एक्स स्थिति का अनुवाद करने के लिए सीएसएस संक्रमण का उपयोग करके एक तत्व को चेतन करना दुर्भाग्य से जब एनीमेशन पूरी तरह से अपनी शुरुआती स्थिति में वापस आ जाता है मैं इस व्यवहार को कैसे रोक सकता हूं और इसे उस स्थान पर रख सकता हूं जहां एनीमेशन खत्म हो जाता है?

मैंने देखा कि अगर मैं आइटम दे रहा हूं तो मैं स्थिति को एनिमेट कर रहा हूं: निरपेक्ष, समस्या दूर हो जाती है। लेकिन मुझे अपने लेआउट के लिए सापेक्ष स्थिति की आवश्यकता है।

 । Card_content_icon {डिस्प्ले: इनलाइन-ब्लॉक; }  

एक i तत्व डिफ़ॉल्ट रूप से इनलाइन है।