如何CSS3动画一个接一个的延迟单选按钮？

Question

我试图为以下代码的单选按钮css动画延迟

<div data-role="fieldcontain" style="width: 680px; margin: 0 auto;"  >
    <fieldset data-role="controlgroup" data-type="horizontal" class="myClass">
        <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
        <label for="radio-choice-21">10</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
        <label for="radio-choice-22">9</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3"  />
        <label for="radio-choice-23">8</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4"  />
        <label for="radio-choice-24">7</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-1"  />
        <label for="radio-choice-25">6</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-26" value="choice-2"  />
        <label for="radio-choice-26">5</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-27" value="choice-3"  />
        <label for="radio-choice-27">4</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-28" value="choice-4"  />
        <label for="radio-choice-28">3</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-29" value="choice-3"  />
        <label for="radio-choice-29">2</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-30" value="choice-4"  />
        <label for="radio-choice-30">1</label>
    </fieldset>
</div>

此单播组来自移动jquery应用程序。在这里，我想逐一展示。我试着从这个link1和link2。但我不明白。有什么帮助吗？

尝试使用css，如

@-webkit-keyframes FadeIn { 
  0% {opacity:0; -webkit-transform:scale(.1);}
  85% {opacity:1; -webkit-transform:scale(1.05);}
  100% {-webkit-transform:scale(1); }
}

.myClass label { float: left; margin: 20px; -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass label:nth-child(1){ -webkit-animation-delay: .5s }
.myClass label:nth-child(2){ -webkit-animation-delay: 1s }
.myClass label:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass label:nth-child(4){ -webkit-animation-delay: 2s }
.myClass label:nth-child(5){ -webkit-animation-delay: 3.5s }
.myClass label:nth-child(6){ -webkit-animation-delay: 4s }
.myClass label:nth-child(7){ -webkit-animation-delay: 4.5s }
.myClass label:nth-child(8){ -webkit-animation-delay: 5s }
.myClass label:nth-child(9){ -webkit-animation-delay: 5.5s }
.myClass label:nth-child(10){ -webkit-animation-delay: 6s }`

但是所有的加载时间都只有1秒。

Answer 1

尝试使用转换延迟属性示例

input[ type="radio"]:first-child
{
    transition: 1s opacity 200ms; /*short way of using transition with the duration, property, delay*/
}

input[ type="radio"]:nth-child(2)
{
    transition: 1s opacity 400ms;
}

input[ type="radio"]:nth-child(3)
{
    transition: 1s opacity 600ms;
}