具有多重价值的CSS变换

Question

以下是一个简单示例：http://jsfiddle.net/04e4umjx/

@-webkit-keyframes circle{
    0% {
        -webkit-transform:translate(100px, 100px) rotate(0deg) translate(-100px, -100px) rotate(0deg);
        background-color:red;
    } 
    100% {
        -webkit-transform:translate(100px, 100px) rotate(360deg) translate(-100px, -100px) rotate(-360deg);
    }  
}

我想这很简单，但我不明白为什么这些关键帧会为内部div创建一个圆圈路径。

我对此示例中transform的语法感到困惑。

在一行中两次设置translate＆amp; rotate值的目的是什么？

希望有人可以帮助我。谢谢。