css - 如何为元素设置动画以在 CSS3 中摆动？

Question

自从看到Treahouse 网站和树上摇摆的标志效果后，我一直在尝试重现它。

.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;
}

但它不会摆动。

这是关于 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;
 }
}

但这也行不通。请参阅JS Fiddle 上的演示。

Answer 1

您可能想尝试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: center top;是它围绕顶部旋转，因此使用 left: -2px to left: 200px 将没有意义。

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

Answer 2

当我使用上述方法时，它在除 IE 之外的所有浏览器中都能正常工作。通过使用下面的代码，'swing' 将在 IE10 和 IE11 中工作。可惜 IE9 没能成功 ;P

.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;
    -ms-animation:swing 3s infinite ease-in-out;
    -ms-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)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}