如何动画元素在CSS3中摆动? [英] How do I animate an element to swing in CSS3?
问题描述
自从我看到 Treahouse网站和标志效果在树上摇摆,我一直在试图复制它。
Since I saw the Treahouse website and the sign effect swinging in the tree, I have been trying to reproduce it.
.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小提琴演示。
我也尝试过修改。
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小提琴演示。
推荐答案
您可能想尝试使用 transform:rotate()
并像sven的注释中更改前缀-moz- -webkit-,因为您正在使用mozilla动画。
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.
以下是一个示例: 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; code>是这样,它围绕顶部旋转,所以使用左:-2px到左:200px将没有意义。
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.
编辑:new jsfiddle示例: http://jsfiddle.net/gVCWE/20/
new jsfiddle example: http://jsfiddle.net/gVCWE/20/
这篇关于如何动画元素在CSS3中摆动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!