自動淡入淡出列表中包含的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

---

不要忘記添加供應商前綴或使用腳本自動添加它們

Answer 2

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

            <li>
               <div id="image2" class="abc">
                <div class="description">
                     <div class="description-text">
                        <h2>Laddak</h2>
                    </div>
                </div>
                </div>
            </li>

            <li>
               <div id="image3" class="abc">
                <div class="description">
                     <div class="description-text">
                        <h2>Hangouts</h2>
                    </div>
                </div>
                </div>
            </li>
</ul>



 setInterval(function(){ $(".abc").fadeToggle("slow");},4000);

http://jsfiddle.net/x73z9/2/

Answer 3

您可以這樣使用：

li div:first-child {
  //put css code here
}