Question

我试图为下面代码的单选按钮设置动画延迟

<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

尝试使用transition-delay属性示例

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

如何使CSS3一个接一个地制作动画，延迟收音机按钮？

1 个答案: