Javascript, Jquery или css3 осциллирующая анимация букв

Question

Я новичок в JavaScript и особенно в анимации.Задача для меня состоит в том, чтобы заставить письмо колебаться взад и вперед максимум на 30 градусов по бокам.Картинка, которую я загрузил, является примером анимации, буква будет перемещаться из верхнего правого угла или из булавки, но я думаю, что это сложнее.Мне нужно некоторое руководство в этом, если кто-то может помочь, пожалуйста, ответьте.Заранее спасибо

, потому что я новичок, я не могу публиковать изображения, поэтому вот ссылка: http://i.stack.imgur.com/byzUC.png

Answer 1

Что ж, это заняло гораздо больше времени, чем мне хотелось бы признать, и надежно только (из моего собственного ограниченного тестирования) в Chromium 12+ и Firefox 5+ в Ubuntu 11.04 (он работает , а не в Opera. 11). В этом случае я покажу только выдержки для Firefox и Chromium, хотя связанная JS Fiddle имеет префиксы вендоров, чтобы хотя бы попытаться использовать Opera (даже если она не удалась). Используя следующую разметку:

<img src="http://i.stack.imgur.com/byzUC.png" id="envelope" />

Следующий CSS создает (бесконечно) колеблющийся конверт для вас, чтобы приспособиться к вашим предпочтениям:

#envelope {
 -webkit-animation-name: oscillate;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: infinite;
 -moz-animation-name: oscillate;
 -moz-animation-duration: 10s;
 -moz-animation-iteration-count: 10;
 -moz-animation-direction: infinite;
}

@-webkit-keyframes oscillate {
    0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 108px 23px;
    }
    33% {
    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: 108px 23px;
    }
    100% {
    -webkit-transform: rotate(-20deg);
    -webkit-transform-origin: 108px 23px;
    }
}

@-moz-keyframes oscillate {
    0% {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 110px 26px;
    }
    33% {
    -moz-transform: rotate(15deg);
    -moz-transform-origin: 110px 26px;
    }
    100% {
    -moz-transform: rotate(-20deg);
    -moz-transform-origin: 110px 26px;
    }
}

JS Fiddle demo .

Однако, учитывая впечатляющую частоту отказов этого подхода (он определенно не работает в Opera 11, и я могу только представить, что в IE это ничего не добивается ...), я настоятельно рекомендую анимированный GIF для явного простота и кросс-браузерная совместимость.