How do I animate a swing element in CSS3?

Question

Since I saw the Treahouse website and the sign effect waving in a tree, I tried 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; } 

But it will not hesitate.

Heres a demo on JS Fiddle .

I also tried modifying this.

 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 .

Answer 1

You might want to try using transform: rotate() and how in sven comment to change the prefix to "-moz-" not "-webkit-" because you are using mozilla animation.

Here is an example: 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; , lies in the fact that it rotates around the top, so using left: -2px left: 200px makes no sense.

EDIT: new jsfiddle example: http://jsfiddle.net/gVCWE/20/

Answer 2

When I used the above method, it worked fine in all browsers except IE. Using the code below, "swing" will work in IE10 and IE11. So sad that IE9 couldn't do it, 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)} }