动画旋转在变换顺序不相同时不动画，为什么？

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) 
    }
}

再次旋转。

那么原因是什么？

我知道订单可能会影响转换。

也许因为旋转（360度）等于旋转（0）;但是，当我改变变换的顺序时，它会再次出现......

Answer 1

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

这是在行动：

＆＃13;

＆＃13;

@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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;