5.4-5.8webstorm css

关于使用css3 动画完成牛顿摆球效果：

使用的规则为@keyframes，不过目前的浏览器都不支持该规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

动画效果为两边的球运动，需要添加两个@keyframes规则，同时在规则添加3个时间点，在3个时间点，设置合理的标签旋转的

　@keyframes donghua_left     0%{

         transform:rotate(60deg);
     }
     50%{
         transform:rotate(0deg);
     }
     100%{
         transform:rotate(0deg);
     }
 }
@keyframes donghua_right{
    0%{
        transform:rotate(0deg);
    }
    50%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(-60deg);
    }
}
注意旋转的轴为摆球线的顶端，手动制作的摆球应该放在使用@keyframes的标签中心，该左端标签的动画属性为：

animation-name: donghua_left;
animation-duration:1s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate;