When a checkbox is checked, I want to activate an animation. Here is the HTML code I am using:
<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>
And here is the CSS code:
#stuffToAnimate {
position: relative;
-webkit-animation: ball 11s ease-in-out 0s infinite normal; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused;
}
#playCheck:checked **XXX**{
-webkit-animation-play-state: running;
}
@-webkit-keyframes ball {
0% {top:5%;}
40% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(180deg);top:80%;}
90% {-webkit-transform: rotate(180deg);}
100% {-webkit-transform: rotate(360deg);top:5%;}
}
I need help completing the **XXX** selector so that the animation can be triggered without messing up the presentation by moving the checkbox #playCheck to the same level as #stuffToAnimate.