css3实现椭圆轨迹旋转

css3实现椭圆轨迹旋转

实现效果

X轴Y轴在一个矩形内移动

做斜线运动

 

 1 .ball {   2     position: absolute;   3     animation:    4       animX 2s linear  infinite alternate,   5       animY 2s linear  infinite alternate   6   }   7 @keyframes animX{   8       0% {left: 0px;}   9     100% {left: 500px;}  10 }  11 @keyframes animY{  12       0% {top: 0px;}  13     100% {top: 300px;}  14 }

 

设置动画延时

设置Y轴延时为动画时长的一半, 运动轨迹变成菱形

1  .ball {  2     animation:   3       animX 2s linear 0s infinite alternate,  4       animY 2s linear -1s infinite alternate  5   }

设置三次贝塞尔曲线

1  .ball {  2     animation:   3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,  4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate  5   }

缩小放大

为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

 1  .ball1 {   2     animation:    3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,   4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,   5       scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;   6   }   7  @keyframes scale {   8     9     0% {  10       transform: scale(0.7)  11     }  12     50% {  13       transform: scale(1)  14     }  15     100% {  16       transform: scale(0.7)  17    }  18  }

 

 

来源：https://www.cnblogs.com/---godzilla---/p/11441222.html