如何在CSS3中动画元素摆动？

自从我看到 the Treahouse website并且树上的标志效应摆动以来,我一直在努力重现它. .box{ width:50px; height:50px; backg

... . . 自从我看到 the Treahouse website并且树上的标志效应摆动以来,我一直在努力重现它.

.box{    width:50px; height:50px;    background: blue;    box-shadow: 0 0 5px blue;    margin:100px;    float: left;    -moz-animation: 3s ease 0s normal none infinite swing;    -moz-transform-origin: center top;}

但它不会摇摆.

这是a demo on JS Fiddle.

我也试过修改它.

bod{  background:blue;}.box{    width:50px; height:50px;    background: yellow;    box-shadow: 0 0 10px red,0 0 25px red inset;    margin:100px;    float: left;    -moz-animation: 3s ease 0s normal none infinite swing;    -moz-transform-origin: center top;    border-radius:50%;}@-webkit-keyframes swing { from {   left: -2px; } to {   left: 200px; }}

但这也不起作用.见demo on JS Fiddle.

.

解决方法

. 您可能想尝试使用transform：rotate(),并在sven的注释中将前缀更改为“-moz-”而不是“-webkit-”,因为您使用的是mozilla动画.

这是一个例子：http://jsfiddle.net/gVCWE/14/

.box{    width:50px; height:50px;    background: yellow;    border: 1px solid black;    margin:100px;    position: relative;    float: left;    -moz-animation: 3s ease 0s normal none infinite swing;    -moz-transform-origin: center top;    -webkit-animation:swing 3s infinite ease-in-out;    -webkit-transform-origin:top;}@-moz-keyframes swing{    0%{-moz-transform:rotate(-3deg)}    50%{-moz-transform:rotate(3deg)}    100%{-moz-transform:rotate(-3deg)}}@-webkit-keyframes swing{    0%{-webkit-transform:rotate(-3deg)}    50%{-webkit-transform:rotate(3deg)}    100%{-webkit-transform:rotate(-3deg)}}

另外,他们有-moz-transform-origin的原因：中心顶部;它是如此围绕顶部旋转所以使用左：-2px到左：200px是没有意义的.

编辑：新jsfiddle示例：http://jsfiddle.net/gVCWE/20/

. . .. ...