CODEWITHSUNDEEP
javascriptjquerycssanimationrotation
Alexander Lexington
Alexander Lexington

Reputation: 21

"Easing-out" an infinite CSS rotation animation when another div is clicked using jQuery

I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.

I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.

HTML

<div id=click>Click me</div>
<div id=spinner></div>

jQuery

$(function () {
$("#click").click(

function () {
    document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['animation-iteration-count'] = '1';
    document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';

});
});

CSS

#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;

animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-moz-keyframes spin-constant {
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin-constant {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-constant {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(36 0deg);
}
}

Here is the fiddle of the basic concept. http://jsfiddle.net/jN5vw/1/

Upvotes: 2

Views: 2744

Answers (1)

Priya Sunanthan
Priya Sunanthan

Reputation: 439

Try this one:

See Demo

jQuery:

$('#click').click(function () {

    $("#spinner").removeClass('spinner');
    $("#spinner").addClass('anim');
});

CSS:

.anim{
    width:50px;
    height:50px;
    margin:20px;
    background-color:red;
    animation:spin 5s ;
    -webkit-animation: spin 1s linear;
    -webkit-animation-iteration-count:1;
}

I think this is what you are asking.

Upvotes: 2

Related Questions