Как я могу оживить элемент для качания в CSS3? ⇐ CSS

[Anonymous]

С тех пор, как я увидел веб -сайт Treahouse и эффект знака, размахиваясь на дереве, я пытался воспроизвести его. < /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>

Но он не будет качаться. < /p>

Вот демонстрация на скрипке JS. < /p>

Я также попробовал модификацию этого. < /p>

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>

Но это тоже не работает. Смотрите эту демонстрацию на скрипке JS.

Подробнее здесь: https://stackoverflow.com/questions/991 ... ng-in-css3