Trigger CSS animation with checkbox inside a fieldset

Question

I try to trigger an animation only when a checkbox is checked. I have the following code :

<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 the following CSS :

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

My problem is: How to complete the **XXX** selector in order to trigger the animation. I could put the checkbox #playCheck in the same level as #stuffToAnimate, but it would mess up my presentation.

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Oriol, Dec 24 '14 at 23:41

score 0 · Accepted Answer · answered Dec 25 '14 at 00:09

you could use jquery to give #stuffToAnimate a class

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

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

your css will look like this

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

Trigger CSS animation with checkbox inside a fieldset

1 Answers1