使淡入淡出效果无限(纯JS，而非jQuery)

Question

我正在搜索一个脚本，以使div淡入淡出，发现这个问题在没有jquery 的纯javascript中淡入淡出

用户bgoldst给出了一个很好的解决方案，对我来说很有效。但我需要淡入淡出来循环运行，而不是像bgoldst的代码所说的那样只运行一次。我是JS的新手，不知道如何让它发挥作用，有什么建议吗？

编辑：我从纯JavaScript淡入功能中找到了Luke和Kai的建议的中间解决方案

那是

<script type="text/javascript">
    var div = document.getElementById("foo");
    setInterval(function() {
        div.style.transition="opacity 1.5s";
        div.style.opacity=0;
    }, 1500);
    setInterval(function() {
        div.style.transition="opacity 1.5s";
        div.style.opacity=1;
    }, 3005);
</script>

然而，淡入/淡出效应并不具有对称行为。

Answer 1

您可以使用CSS，而不需要Javascript。只需使用CSS动画属性（如果需要设置关键帧等），然后设置此属性：

animation-iteration-count: infinite;

根据你的评论，这里有一支我制作的钢笔，它可以做你想做的事——你只需要把动画从改变背景颜色改为褪色。我希望这能有所帮助：

http://codepen.io/lukeschunk/pen/pyPpQO