animation+transform实现轨迹平移

本文主要是介绍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);
                }
   

这篇关于animation+transform实现轨迹平移的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---