CSS 如何在 CSS3 中为要摆动的元素设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9910372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I animate an element to swing in CSS3?
提问by Toni Michel Caubet
Since I saw the Treahouse websiteand the sign effect swinging in the tree, I have been trying to reproduce it.
自从我看到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;
}
But it won't swing.
但它不会摆动。
Here's a demo on JS Fiddle.
I also tried a modification of that.
我也尝试过修改。
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;
}
}
But that doesn't work either. See that demo on JS Fiddle.
回答by Caleb Doucet
You might want to try using transform: rotate()and like in sven's comment change the prefix to "-moz-" not "-webkit-" because you are using mozilla animations.
您可能想尝试transform: rotate()在 sven 的评论中使用和喜欢将前缀更改为“-moz-”而不是“-webkit-”，因为您使用的是 mozilla 动画。
Here is an example: http://jsfiddle.net/gVCWE/14/
这是一个例子：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)}
}
Also, the reason they have -moz-transform-origin: center top;is so it rotates around the top so using left: -2px to left: 200px will not make sense.
此外，它们的原因-moz-transform-origin: center top;是它围绕顶部旋转，因此使用 left: -2px to left: 200px 没有意义。
EDIT: new jsfiddle example: http://jsfiddle.net/gVCWE/20/
编辑：新的 jsfiddle 示例：http: //jsfiddle.net/gVCWE/20/
回答by Rohith
When I used the above method, It worked fine in all browsers except IE. By using below code, the 'swing' will work in IE10 & IE11. So sad that IE9 couldn't make it ;P
当我使用上述方法时，它在除 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)}
}
