Question

I guess this would apply to swinging, or bouncing. An example on how to make an object swing here in another post, where this code was posted: http://jsfiddle.net/gVCWE/149/

How would you make the swinging slow down to a stop?

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

I would like to do other ‘inertia effects’ as well. I do not mind using JavaScript or JQuery if that’s necessary. I feel like CSS alone or keyframes is not enough for what I want to do.

I’m fine using setInterval and doing something like this:

function prepareAnimation()
{
    setInterval(slowAnimation, 200)
}

function slowAnimation()
{
    speed=$(".box").getSpeed(); // how would I write getSpeed?
    if(speed<=0) return;
    speed = speed - .1;
    $(".box").setSpeed(speed); // how would I write setSpeed (degree would be set in here too)?
}

I do not know the best way to changing animation properties through script. Especially when it comes to changing the duration in the middle of an animation, which I’m not sure is possible at all. Thanks.

Answer 1

http://jsfiddle.net/gVCWE/150/

(function swing() {
    var ang  = 20,
        dAng = 1,
        dir  = 1,
        box = document.getElementById("box");

    (function setAng(ang){
        box.style.WebkitTransform =  'rotate('+ang+'deg)';
        box.style.MozTransform =  'rotate('+ang+'deg)';
        dir = -dir;
        if (Math.abs(ang) > 0)
            setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
    })(ang);
})();​

CSS

.box{
    width:50px; height:150px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-transition:-moz-transform 1s ease-in-out;
    -moz-transform-origin: center top;
    -webkit-transition:-webkit-transform 1s ease-in-out;
    -webkit-transform-origin:top;
}

You can switch the initial direction by making the initial values of ang and dir negative. You can make the “swinging” slow more quickly by increasing the value of dAng, but it should be a factor of ang.