深入理解CSS3里的transform变换

transform变换不会影响元素在文档流中的位置

      transform是CSS3中实现各种炫酷效果的样式属性，基础的转换函数有缩放scale()、平移translate()。transform对元素在文档流中的盒模型的影响就相当于position:relative，不会改变盒模型，包括大小和位置。

在animation的@keyframes里设置的css样式，在该animation完成之前不能再被改变

      比如：

/*动画：右控制箭头左右摆动*/
@keyframes swing-right {
  0%{
    transform: scale(1.5);
  }
  100%{
    transform: translateX(1.5em);
  }
}
/*给右控制箭头应用动画*/
.right-control{
    transform-origin:0 50%;
    animation: swing-right 1s infinite alternate;
    transform:scale(5);//这条样式规则不起作用
}

想想这样也是有原因的，在动画进行过程中，其它地方设置的样式不应该与动画所使用的样式冲突。