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  }