Javascript、Jquery或css3示范性字母动画

Question

我是javascript的新手，尤其是动画方面的新手。对我来说，挑战是使一个字母来回摆动，最多30度，从两边。我上传的图片是动画的一个例子，字母将从右上角或引脚移动，但我认为这更难。我需要一些指导，如果有人可以帮助，请回答。提前感谢

因为我是新来的，所以我不能发布图片，下面是链接：http://i.stack.imgur.com/byzUC.png

Answer 1

嗯，这比我承认的时间要长得多，而且只在Ubuntu11.04上的ChromiumChromiumChromium5+和Firefox11.04上(在Opera11中不起作用)是可靠的(从我自己的有限测试来看)。在这种情况下，我只会展示一些摘录来覆盖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演示。

但是，考虑到这种方法的惊人的失败率(它在Opera 11中肯定不起作用，我只能想象它在IE中什么也没有实现.)我强烈建议使用动画的gif来实现简单性和跨浏览器兼容。