在持续时间结束后通过 CSS 触发 Icon/Image 移动

Question

我对 Web 开发有点陌生，所以如果我的术语不正确或某些事情明显显而易见，请原谅我，但到目前为止我在搜索中找不到解决方案。这个问题如下：我有一个网页，我正在显示我创建的一些图标或成功更改的"sprites"（我相信正确的术语），即背景移动了一些像素以显示悬停时图像的彩色部分（最初为灰色）。这在我调用 .social-slide:hover 时反映在下面。然而，我想要完成的是让 "change" 在一段时间后发生（同时保持悬停功能），例如页面加载时或 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 属性是定时的，但许多与已经被调用或被拍摄后的动画有关地方。是否有属性或方法将图标启动为 "fire" 或更改，我可以通过 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);

在持续时间结束后通过 CSS 触发 Icon/Image 移动

Trigger Icon/Image Movement Via CSS After Elapsed Duration

html

css

image

css-transitions

css-animations