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.