Javascript/jQuery анимация «Dangle»

Question

Я хотел бы создать анимацию в jQuery или предпочтительном чистом javascript, который делает div «болтаться». Я добавил анимированный gif, который показывает анимацию. Я не знаю, как это сделать, если я могу использовать существующую jquery easing/animation для анимации javascript + css или как. Я также думал о холст, но это было бы ограничить свою способность манипулировать содержанием и т.д.

РЕЗУЛЬТАТ:

Благодаря @peirix за помощь мне с CSS-анимации. Вот результат, которого я надеялся достичь. 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

Хорошо. Для этого вам не нужен javascript. Все, что вам нужно, это любовь к CSS. Я сделал быструю скрипку, чтобы показать основы. Просто поиграйте с цифрами немного, чтобы получить то, что вы хотите.

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

Одно замечание, хотя. Ключевые фреймы по-прежнему нуждаются в -prefix для браузеров webkit (хром, сафари, сафари на ios, android и т. Д.), Поэтому вам нужно написать его один раз и один раз без префикса, чтобы поразить все браузеры. (Даже IE10 и IE11 поддерживают это)

Answer 2

Я создал Fiddle с примером того, как это может быть сделано. Это зависит от transit -Plugin для 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); 

Большой плюс заключается в том, что вы можете связать различные переходы и трансформировать свой элемент. Но это дополнительный плагин, который необходимо загрузить.

Answer 3

Вы можете попробовать css3.

В интересном demo в Github.

Надеюсь, это поможет вам.

Answer 4

Действительно, CSS3 может здесь немного поработать, но вам все равно нужен Javascript для запуска и остановки анимации, например, при наведении или нажатии на события.

Я сделал небольшой JSFiddle. Попробуйте и наведите курсор на красную рамку. Я использовал webkit -prefixes, но вы должны иметь возможность легко переключаться с moz или ms.

Основные отличия от других предложений здесь

• использование animation-iteration-count: 1, чтобы сделать его качают один раз, а затем остановиться.
• использовать $.on('<prefix>animationStop'), чтобы удалить класс анимации. этот взлом необходим, чтобы перезапустить анимацию позже.