觸發圖標/圖像移動通過CSS過後持續

Question

我有點新的Web開發，所以請原諒我，如果我的術語是關閉或東西是公然明顯的，但我一直無法在迄今找到的解決方案我搜索。這個問題如下：我有一個網頁，我正在顯示一些我已經創建的圖標或「精靈」（我相信這個正確的術語）成功更改，即背景移動了許多像素以顯示彩色懸停時圖像的部分（最初是灰色的）。當我撥打.social-slide:hover時，會在下面反映出來。然而，我想要完成的是在某段時間（保持懸停功能）之後發生「更改」，例如頁面加載時或10秒鐘之後。 IE：

.img-hover {background-image: url('images/img-hover.png'); background-position: 0px -48px;} - 5秒
.img-hover2 {background-image: url('images/img-hover2.png'); background-position: 0px -48px;}後 - 10秒

後

（當然，應該恢復到原來的灰色狀態下出現運動。）我發現，被計時，但許多數CSS性質與已經被調用或發生之後的動畫相關。是否有財產或方法啓動圖標以「啓動」或更改，我可以通過CSS或Javascript撥打電話？在此先感謝，再次抱歉，我是一個新手。

我style.css：

.social-slide { 
height: 48px; 
width: 48px; 
margin: 10px; 
float: left; 
display: inline-block; 
-webkit-transition: all ease 0.3s; 
-moz-transition: all ease 0.3s; 
-o-transition: all ease 0.3s; 
-ms-transition: all ease 0.3s; 
transition: all ease 0.3s; 
} 
.social-slide:hover { 
background-position: 0px -48px; 
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); 
} 
.img-hover { 
background-image: url('images/img-hover.png'); 
} 

Answer 1

您需要JavaScript來做到這一點。超時添加您的課程。將正確的ID添加到您希望它生效的元素，以便JavaScript選擇正確的ID。

這裏是一個plunkr演示：http://plnkr.co/edit/RwQf2mrI1SsDe2ykvyFs

<li> 
<a id="five-delay" href="https://twitter.com/share" class="twitter-hover social-slide" data-size="..." data-hashtags="..."></a> 
</li> 

    (function(window, document){ 
     //this will select the element you want to add the class to 
     var fiveSecondDelay = document.getElementById('five-delay'); 

     //this function executes on page load 
     window.onload = function(){ 
      //this calls the passed in function after X delay, 5 seconds in this case 
      setTimeout(function(){ 
       //this will add the classes to the element after the 5 second delay 
       fiveSecondDelay.className += 'twitter-hover social-slide'; 
      }, 5000); 
     } 
    })(window, document);