javascript - 列表中包含的 div 自动淡入淡出

Question

我需要你们所有人的一点帮助。我有一个列表，其中存在多个 div。每个列表内部有 3 个 div，其中每个列表的第一个 div 是一个图像。我需要淡入淡出每个列表的第一个 div。

下面是我的代码。

    <input type="radio" id="control1" name="controls" checked="checked"/>
    <label for="control1"></label>
    <input type="radio" id="control2" name="controls"/>
    <label for="control2"></label>
    <input type="radio" id="control3" name="controls"/>
    <label for="control3"></label>
    <input type="radio" id="control4" name="controls"/>
    <label for="control4"></label>
    <input type="radio" id="control5" name="controls"/>
    <label for="control5"></label>
    <div  class="sliderinner">
        <ul>
             <li>
              <div id ="image1">
               <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 3</h2>
                    </div>
                </div>
                </div>
            </li>
            <li >
               <div id ="image2">
                <div class="description">

                    <div class="description-text">
                        <h2>Laddak</h2>
                    </div>
                </div>
                </div>

            </li>
            <li>
               <div id ="image3">
                <div class="description">

                    <div class="description-text">
                        <h2>Hangouts</h2>
                    </div>
                </div>
                </div>

            </li>
            <li>
               <div id="image4">
                <div class="description">

                    <div class="description-text">
                        <h2>Birds</h2>
                    </div>
                </div>
                </div>

            </li>
            <li  >
               <div id="image5">
                <div class="description">

                    <div class="description-text">
                        <h2>Taj Mahal</h2>
                    </div>
                </div>
                </div>

            </li>
        </ul>
    </div>
</div><!--slider-->

Answer 1

<edit>

每个盒子的动画+延迟增加:http://codepen.io/gc-nomade/pen/qAjod/

</edit>

---

这是一个例子:

div {
  animation: fdio  1s infinite;
  background:gray;
}
@keyframes fdio {
  50% {opacity:0;}
}

对于:<div> text </div>

DEMO

---

不要忘记添加 vendor 前缀或使用脚本自动添加它们