当变换的顺序不同时，动画中的旋转不动画，为什么？

Question

这是演示：http://codepen.io/anon/pen/WGLGyY

当关键帧为时，DIV 不旋转：

@keyframes test1{
    0% {
        transform: rotate(0) scale(1, 1)  translate(0,0)
    } 
    100% {
        transform:  scale(2, 2) rotate(180deg)  translate(200px,200px) 
    }
}

当我将关键帧更改为：

@keyframes test1{
    0% {
        transform: rotate(0) scale(1, 1)  translate(0,0)
    } 
    100% {
        transform:  rotate(360deg) scale(2, 2) translate(200px,200px) 
    }
}

它再次旋转。

那么这里的原因是什么？

我知道顺序可能会影响转换。

可能是因为 rotate(360deg) 等于 rotate(0)；但是当我改变变换的顺序时，它又回来了....

Answer 1

使用transform: none 作为您的第一个关键帧，它将旋转。

它在行动：

@keyframes test1{
	0% {
		transform: none;
	}   
	100% {
		transform:  scale(2, 2) rotate(360deg)  translate(200px,200px) 
	}
}

#test{
  width:200px;
  height: 200px;
  background: red;
  animation: test1 3s infinite
}

<div id="test"></div>