Javascript / jQuery “Dangle” animation

Question

I would like to create an animation in jQuery or preferable pure javascript that makes a div "dangle". I have attached an animated gif that shows the animation. I don't know how recreate this, if it is something I can use an existing jquery easing / animation for or javascript + css animation or how. I also thought about canvas, but that would limit my ability to manipulate content etc.

RESULT:

Thanks to @peirix for helping me out with the CSS animation. Here is the result I was hoping to achieve. http://jsfiddle.net/zeg61pb7/7/

CSS

#box {
   width:30px;
   height:30px;
   position:absolute;
   top:100px;
   left:100px; 
   text-indent: 90px;
   background-color:#aaaaaa;
    transform-origin: top center;
    -webkit-transform-origin: top center;
    -webkit-animation: dangle 2s infinite;
    -webkit-border-top-left-radius: 50%;
    -webkit-border-top-right-radius: 50%;
    -moz-border-radius-topleft: 50%;
    -moz-border-radius-topright: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

#box:after {
    position: absolute;
    height: 5px;
    width: 5px;
    background: #aaaaaa;
    top: -4px;
    left: 12px;
    content: '';
    border-radius: 50%;
}

.dims {
    position: absolute;
    height: 10px;
    width: 10px;
    background: #aaaaaa;
    top: 125px;
    left: 110px;
    border-radius: 50%;
    -webkit-animation: movee 2s infinite;
}

@-webkit-keyframes dangle {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(30deg); }
    10% { -webkit-transform: rotate(-28deg); }
    15% { -webkit-transform: rotate(26deg); }
    20% { -webkit-transform: rotate(-24deg); }
    25% { -webkit-transform: rotate(22deg); }
    30% { -webkit-transform: rotate(-20deg); }
    35% { -webkit-transform: rotate(18deg); }
    40% { -webkit-transform: rotate(-16deg); }
    45% { -webkit-transform: rotate(12deg); }
    50% { -webkit-transform: rotate(-10deg); }
    55% { -webkit-transform: rotate(8deg); }
    60% { -webkit-transform: rotate(-6deg); }
    65% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes movee {
    9% { left: 110px; }
    10% { left: 120px; }
    15% { left: 100px; }
    20% { left: 114px; }
    25% { left: 106px; }
    30% { left: 113px; }
    35% { left: 107px; }
    40% { left: 111px; }
    45% { left: 109px; }
    50% { left: 110px; }
}

Answer 1

Well. You don't really need javascript for that. All you need is some CSS love. I made a quick fiddle to show the basics. Just play around with the numbers a bit to get what you want.

http://jsfiddle.net/zeg61pb7/3/

One note, though. Keyframes is still in need of -prefix for webkit browsers (chrome, safari, safari on ios, android etc), so you need to write it once with, and once without the prefix to hit all browsers. (Even IE10 and IE11 supports this)

Answer 2

You can have a try with css3.

Here is an interesting demo in Github.

Hope it helps you.

Answer 3

I created a Fiddle with an example of how it can be done. It depends on the transit -Plugin for jQuery.

var count = 0;
var deg = 45;
var minus = 5;
var interval = setInterval(function(){
    $ $('#box').transition({ 
        rotate: deg + 'deg',
        transformOrigin: 'center top'
    }).transition({ 
        rotate: '-'+deg+'deg',
        transformOrigin: 'center top'
    });
        if(count === 5){
            clearInterval(interval);
            $('#box').transition({ rotate: '0deg' })
        }
    if(deg > 10){
        deg = deg-(minus+5);
     }
    count++;
}, 300);

A big plus is, that you can chain different transitions and transforms to your element. But it`s an additional Plugin which must be loaded.

Answer 4

Indeed CSS3 can work some magic here, but you would still need Javascript to start and stop the animations, on hover or click events, for example.

I've made a small JSFiddle . Try and hover the red box. I've used webkit -prefixes, but you should be able to switch that easily with moz or ms .

The key differences to other suggestions here are

• use animation-iteration-count: 1 to make it dangle once and then stop.
• use $.on('<prefix>animationStop') to remove the animation class. this hack is needed to restart the animation later on.