经过持续时间后通过 CSS 触发图标/图像移动

Question

我对 Web 开发有点陌生，所以如果我的术语有问题或有什么明显的地方，请原谅我，但到目前为止我无法在搜索中找到解决方案。这个问题如下：我有一个网页，我正在显示一些我创建的图标或成功更改的“精灵”（我相信正确的术语），即背景移动了一些像素以显示彩色悬停时图像的一部分（最初为灰色）。当我打电话给.social-slide:hover 时，这反映在下面。但是，我想要完成的是在一段时间后（同时保持悬停功能）发生“更改”，例如在页面加载时或 10 秒后。即：

.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 选择正确的。

这是一个 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);