How do I change animation-timing-function in JavaScript?

Question

I have an animation in CSS that spins an image around its centre. I want to be able to change animation-timing-function and -webkit-animation-timing-function etc. programmatically in JavaScript. Here is the code and what I have tried:

  <div id="content"> <div id="container"> 
<div id="outerQ"></div> <div id="innerQ">
</div>
 </div>
 <div id="logo"></div> 
<span id="sp"></span> 
<input type="button" id="linear" value="Linear"/>
 <input type="button" id="ease" value="Ease in and out"/>
 </div>

SCRIPT :

<head>
    <script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script>
        $(document).ready(function ()
        {
            $("#linear").click(function ()
            {
                $("#innerQ").css("-webkit-animation-timing-function", "linear");
            });

            $("#ease").click(function ()
            {
                $("#innerQ").css("-webkit-animation-timing-function", "ease-in-out");
            });
        });
    </script>

CSS:

 <style>
            body
            {
                background: #018a9a;
                margin: 20px;
            }

            #content
            {
                width: 566px;
                height: 120px;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -80px;
                margin-left: -278px;
            }

            #outerQ
            {
                width: 96px;
                height: 120px;
                background-image: url('outerQ.png');
            }

            #innerQ
            {
                width: 96px;
                height: 120px;
                background-image: url('innerQ.png');
                position: absolute;
                left: 0;
                top: 0;
            }

            #container
            {
                width: 96px;
                height: 120px;
                float: left;
            }

            #logo
            {
                width: 470px;
                height: 120px;
                background-image: url('LogoLarge.png');
                float: left;
            }

            #sp
            {
                clear: both;
            }

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

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

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

            #innerQ
            {
                /*IE 10*/
                animation-name: spin;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-duration: 1.3s;
                animation-play-state: running;
                transform-origin: 48px 50.5px;

                /*Chrome*/
                -webkit-animation-name: spin;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 1.3s;
                -webkit-animation-play-state: running;
                -webkit-transform-origin: 48px 50px;

                /*Firefox*/
                -moz-animation-name: spin;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                -moz-animation-duration: 1.3s;
                -moz-animation-play-state: running;
                -moz-transform-origin: 48px 50px;
            }
        </style>
</head>
<body>

HTML:

        <input type="button" id="linear" value="Linear"/>
        <input type="button" id="ease" value="Ease in and out"/>
    </div>


</body>

I am using webkit here because I use Chrome, clicking the buttons do nothing. I also want to change 'animation-iteration-count' and 'animation-duration' but these don't work. The only one that does work is '-webkit-animation-play-state'. I have also tried:

$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";

That doesn't work too. Is there a way of changing these properties after the page has loaded? Thanks

Try $("#innerQ")[0].style.… or document.getElementById("innerQ").style.…. jQuery collections have no style property. — Bergi
Where is the rest of html?? Where is the element with id 'innerQ'??? — HIRA THAKUR
what all things have yo tried rob??List them I have done some animation with the below answer(its 100% correct)!!!its full proof and verified!!!I can give you the link if you want. — HIRA THAKUR
I didn't really understand your answer, I tried having the function as the click event and changing the class there. That didn't work. What is the link? — Rob Crocombe

HIRA THAKUR HIRA THAKUR · Accepted Answer · 2013-06-25T11:58:02

function function_name() {
    document.getElementById('innerQ"').className = "innerQ";
}

CSS

.innerQ
        {
           //you css code(put all timing stuff here!!!)
        }

//Step 1--->Put you desired css animation in a css class
//Step 2--->add that css class with javascript(className)
//Step 3---->Call function animation on click of the button

How do I change animation-timing-function in JavaScript?

1 Answers