Javascript，Jquery或CSS3摆动字母动画

Question

i'm new in javascript and especially in animation. The challenge for me is to make a letter oscilate back and forth max 30 degrees from the sides. The picture i uploaded is an example of the the animation, the letter will move from the upper right corner or from the pin but i think that is harder. I need some guidance into this if anyone can help please reply. Thanks in advance

because i'm new i cannot post images so here is the link: http://i.stack.imgur.com/byzUC.png

Answer 1

Well, this took far longer than I care to admit, and is only reliable in (from my own limited testing) Chromium 12+ and Firefox 5+ on Ubuntu 11.04 (it does not work in Opera 11). That being the case I'll show only the excerpts to cover Firefox and Chromium, though the linked JS Fiddle has vendor prefixes to at least try with Opera (even if it fails). Using the following mark-up:

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

The following CSS produces an (infinitely) oscillating envelope for you to adjust to your preferences:

#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 .

Given the spectacular failure rate of this approach, though (it certainly doesn't work in Opera 11, and I can only imagine that it achieves nothing in IE...) I'd strongly suggest an animated gif for the sheer simplicity and cross-browser compliance.