on/off CSS3 animation w/range

spinning css3 animation with a range input control

by James Doyle

HTML

<div id="foo" class="circle">
    <div class="line"></div>
</div>
<input id="myRange" onmousemove="returnRange(this.id)" type="range" name="points" min="1" max="10" />
<br />
<span id="print">6</span>
<br />
<button id="myBtn" onclick="changeClasshtml5()" type="button" >Start Animation</button>

CSS

div {
    margin: 20px;
}

.line {
    float: left;
    margin: 0 0 0 50px;
    height: 49px;
    width: 1px;
    background: #000;
}

.circle {
    width: 100px;
    height: 100px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #ff0;
}

.spin {
    -webkit-transform: rotate(360deg);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    /* following is for mozilla */
    -moz-transform: rotate(360deg);
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: spin;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
}

@keyframes "spin" {
 from {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       transform: rotate(360deg);
 }

}

@-moz-keyframes spin {
 from {
       -moz-transform: rotate(0deg);
 }
 to {
       -moz-transform: rotate(360deg);
 }

}

@-webkit-keyframes "spin" {
 from {
    -webkit-transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
 }

}

JavaScript

var rangeValue = 6;

function returnRange(id) {
    var q = document.getElementById(id);
    var print = document.getElementById('print');
    print.innerHTML = q.value;
    rangeValue = q.value/10;
}

function changeClasshtml5() {
    var x = document.getElementById('foo');
    var btn = document.getElementById('myBtn');
    if (x.className == 'circle') {
        btn.innerHTML = "Stop Animation";
        //x.className = 'circle spin');
        alert(rangeValue);
        x.classList.add("spin");
    } else {
        btn.innerHTML = "Start Animation";
        //x.className = 'circle';
        x.classList.remove("spin");
    }
}

// element.classList.add('foo');
// element.classList.remove('bar');
// if (element.classList.contains('bof'))
     // element.classList.toggle('zot');