如何在CSS3中设置一个又一个单选按钮的动画？

我正在尝试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>

---

但所有都只在前1秒加载。

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

---

链接1中的示例已经逐个显示了项目。你在找类似的东西吗？你能再澄清一下吗？此外，在寻求帮助时，最好是把你迄今为止尝试过的东西和你遇到的问题都贴出来，而不是链接其他例子。@Harry谢谢你的评论。我还添加了一些有问题的代码。请看that@Harry谢谢，明白了。

@-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 }`

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;
}