Question

我有一张背景图片作为地图。我想要一张推荐书（绝对定位的div）列表在所述地图上一个接一个地出现和消失。一旦显示完所有，就需要重复。

如何使用css3动画实现此功能？

Answer 1

您可以使用CSS3动画，通过延迟它们可以创建完整的元素动画，然后使用JS setInterval重新启动动画。这是开展AdWords广告的常用方法。

具有预定义动画的好图书馆是animate.css，您需要计算所有动画通过并完成的时间，并设置一个删除该类的间隔，并在每次动画完成时将其添加回来（总时间）所有动画都需要完成。）

Answer 2

我喜欢使用的一个技巧是迭代你想要显示的每个元素，并将动画偏移一段时间*元素索引。你可以将它包装在一个函数中，并在时间*元素数组长度后调用它。这将永远有效地循环它。基于半秒动画的一些通用代码如下所示：

 function runThrough() {
        $('.your-elements').each(function(i,v) {
            var current = $(this);
            setTimeout(function() { 
                // do your animation e.g. $(current).fadeIn(500);            
            }, i * 500);        
        });
        setTimeout(runThrough(), $('.your-elements').length * 500 );
    }

css3弹出和弹出动画，一旦显示完全重复

2 个答案: