Javascript / jQuery "Dangle" animation
animation, javascript, jquery
Solution
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)
Problem
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; } } ```