Controlling a CSS animation with Javascript

Question

I have a CSS animation that I would like to control with JS

My animation:

http://jsfiddle.net/link2twenty/ny5rb41f/

@keyframes dash {
    from {
        stroke-dashoffset: 55;
    }
    to {
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

@keyframes spinner {
    from {
        transform: rotate(-315deg);
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%);
        opacity: .2;
    }
    to {
        transform: rotate(0deg);
         filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%); 
        -o-filter: grayscale(0%);
        opacity: 1;
    }
}

In my application , currently when a user pulls down on the screen a classes style is updated. This sometimes causes lag, and with my new animation being more complex I fear it may cause even more lag.

I was thinking maybe have a few classes at different stages and then update the elements class as it gets to the right distance, but then to get it smooth we need really long code,

So the real question is; is there a way to control css animations with JavaScript without having to write each part of the animation as a separate class.

Answer 1

You could create a class call animate and in this class you put all the animate properties. Later with javascript, in this case jQuery, you could add this class to start the animation like this:

 $('button').click(function () { $(".refreshIcon").addClass("animate"); $(".refreshStem").addClass("animate2"); }); 

 .container { background: white; } .animate { animation: spinner 3s; animation-fill-mode:forwards; animation-iteration-count: 1; } .animate2 { animation: dash 3s linear; animation-fill-mode:forwards; animation-iteration-count: 1; } .refreshIcon { pointer-events: none; display: block; height: 32px; width: 32px; } .refreshStem { stroke-dasharray: 55; fill: rgba(0, 0, 0, 0); stroke: blue; stroke-width: 1; } .refreshHead { fill: blue; stroke-width: 0; } @keyframes dash { from { stroke-dashoffset: 55; } to { stroke-dashoffset: 0; stroke-width: 2; } } @keyframes spinner { from { transform: rotate(-315deg); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); opacity: .2; } to { transform: rotate(0deg); filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); opacity: 1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg class="refreshIcon" viewBox="0 0 24 24"> <g> <path class="refreshStem" transform="rotate(-45 12.000000476837158,12.000000476837158), translate(24), scale(-1, 1)" d="m5.02361,12c0,-3.87126 3.12203,-7.00698 6.97639, -7.00698c3.85436,0 6.97639,3.13572 6.97639, 7.00698c0,3.87126 -3.12203,7.00698 -6.97639,7.00698c-3.85436, 0 -6.97639,-3.13572 -6.97639,-7.00698z" /> <rect fill="#ffffff" stroke-width="0" x="17" y="11.029" width="4" height="3" stroke="#ffffff"/> <path class="refreshHead" d="m12.97192,10.96708l0,-6.99941l7.06761,6.99941l-7.06761,0z" transform="rotate(-90 16.5,7.5) " /> </g> </svg> <button >start</button>