实现效果

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

做斜线运动

.ball {

position: absolute;

animation:

animX 2s linear infinite alternate,

animY 2s linear infinite alternate

}

@keyframes animX{

0% {left: 0px;}

100% {left: 500px;}

}

@keyframes animY{

0% {top: 0px;}

100% {top: 300px;}

}

设置动画延时

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

.ball {

animation:

animX 2s linear 0s infinite alternate,

animY 2s linear -1s infinite alternate

}

设置三次贝塞尔曲线

.ball {

animation:

animX 2s cubic-bezier(0.36,0.64,1) -1s infinite alternate,

animY 2s cubic-bezier(0.36,1) 0s infinite alternate

}

缩小放大

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

.ball1 {

animation:

animX 2s cubic-bezier(0.36,1) 0s infinite alternate,

scale 4s cubic-bezier(0.36,1) 0s infinite alternate;

}

@keyframes scale {

0% {

transform: scale(0.7)

}

50% {

transform: scale(1)

}

100% {

transform: scale(0.7)

}

}