Html 在字段集中使用复选框触发CSS动画

我尝试仅在选中复选框时触发动画。 我有以下代码：

<div data-role="fieldcontain" >
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" class="mediaCheckbox" id="playCheck"/>
        <label data-role="button" class="fa fa-play" id="play" for="playCheck"></label>
        <input type="checkbox" class="mediaCheckbox" id="muteCheck"/>
        <label data-role="button" class="fa fa-bell" id="mute" for="muteCheck"></label>
    </fieldset>
</div>
<div id="stuffToAnimate"></div>

---

我的问题是：如何完成

**XXX**

选择器以触发动画。我可以将复选框

#playCheck

与

#stuff to animate

放在同一级别，但这会打乱我的演示文稿。

您可以使用jquery给

#stuff to animate

一个类

$('#playCheck:checkbox').click(function() {

    if ($(this).is(":checked"))
    {
        $("#stuffToAnimate").addClass("animate");
    }
    else {
        $("#stuffToAnimate").removeClass("animate");
    }
});

您的css将如下所示

.animate{
-webkit-animation-play-state: running;
}

---

由于没有父选择器，您不能。的可能重复

.animate{
-webkit-animation-play-state: running;
}