CSS运行动画后，原本位置发生了偏移

在制作八卦图旋转动画后，发现原本居中的八卦图向右偏移了位置

不加动画

加了动画

原因：定位居中时，用了transform位移和left配合居中

    position: fixed;
    left: 50%;
    top: 50px;
    transform:translateX(-50%);

但是，当加上动画后，浏览器会自动把位置定位到left：50%，也就是对同一个元素来说，同时有animation和transform两个属性后，transform会被无效化。

解决方法

1. 用其他居中方式，例如

margin-left:-50%width
总之不要用transform位移居中

2. 在外面再套一个div，控制transform，内层div控制animation

---

总结：css中transform与animation同时使用在一个元素上会导致transform失效，可以通过不使用transform换做其他方法或者在外层套一个div，分别控制transform和animation。