animation+transform实现轨迹平移

之前通过animation+transtion实现平移，transtion通过定义left和top值来移动；

其中 animation是定义一个动画，可以通过百分数来定义每个时刻的状态

基本的需要： 

-webkit-animation-name: Aname;

-webkit-animation-duration: 30s;

本次操作实现，太阳落山的轨迹，用了transform属性，可以用这个方法实现：

（1）定义animation中，太阳0%的状态，和100%的状态；

（2）在每个状态里，用translate表示太阳的平移坐标，分布是translateX(0) translateY(0);

注意translate是transform属性中的一个方法。

代码如下：

.rotation {
            -webkit-animation-name: rotation;
            -webkit-animation-duration: 30s;
            -moz-animation-name: rotation;
            -moz-animation-duration: 30s;
        }
        
        @-webkit-keyframes rotation {
            0% {
                 transform: translateX(0) translateY(0);
                }