Wie kann ich ein Element animieren, um in CSS3 zu schwingen? ⇐ CSS

[Anonymous]

Seit ich die TreAhouse -Website und den Signal -Effekt im Baum gesehen habe, habe ich versucht, sie zu reproduzieren. < /p>

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

, aber es schwingt nicht.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;
}
}
< /code>

Aber das funktioniert auch nicht. Sehen Sie diese Demo auf JS Fiddle.