CSS3制作简单的网页动画——实现弹跳球运动

We我们将使用Flexbox布局，将小球放在页面中间，大小为100px*100px，背景色为橙色。CSS代码：body{display:flex;/*使用Flex布局*/justify-content:center;/*水平居中*/}.ball{width:100px;height:100px;border-radius:50%;/*把正方形变成圆形*/background-color:#FF5722;/*Setcolortoorange*/}为CSS动画创建关键帧（keyframe）关键帧（keyframe）这样我们就可以完全控制动画了。创建关键帧（keyframe）样式非常简单。我们使用关键字@keyframes后跟动画名称：CSS代码：@keyframesnameOfAnimation{/*code*/}在这个例子中，我们将关键帧命名为bounce。在关键帧中，使用from和to关键字指定动画起点和终点的CSS样式。CSS代码：@keyframesbounce{from{/*start*/}to{/*end*/}}简单吧？作为最后一步，我们可以为起点和终点添加CSS样式。要创建弹跳效果，我们只需更改球的位置。transform允许我们修改给定元素的坐标。这是最终的关键帧：CSS代码：@keyframesbounce{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,200px,0);}}我们使用transform让小球沿三维轴平移，translate3D函数需要3个输入参数，即(x,y,z)。由于我们想让球上下弹跳，所以我们只需要沿y轴平移即可。因此，动画结束点的y值（即to中的样式）变为200px。运行关键帧现在已经创建了@keyframe，是时候运行它了！返回.ball{}css并添加以下代码行：csscode:.ball{/*...*/animation:bounce0.5s;动画方向：交替；animation-iteration-count:infinite;}对此进行解释三行代码：使用我们的关键帧规则告诉球元素弹跳。将完成动画的时间长度设置为0.5秒。完成后，动画以相反的方向（反向）执行。无限次地运行动画。太棒了，到目前为止。它接近我们想要的，但它并不完美：它看起来不像一个弹跳的球。那是因为我们没有给动画设置速度曲线，默认设置为缓动。这意味着动画的速度开始很慢，中间变快，接近尾声时又变慢。不幸的是，这对于弹跳球来说并不理想。幸运的是，我们可以使用Math!自定义此速度曲线！进入太多细节，您可以使用贝塞尔曲线来指定自定义动画时间。下面附上代码：CSScode:.ball{/*...*/animation:bounce0.5scubic-bezier(.5,0.05,1,.5);}当然这是用CSSAnimations和The由关键帧创建的最简单的动画效果。这里推荐一下我的前端学习交流群：784783012，全是前端学习。整理了一份2018年最全的前端学习资料，从最基础的HTML+，从CSS+JS【炫酷特效，游戏，插件打包，设计模式】到移动端HTML5项目实战学习资料都有整理，发给每一位前端小伙伴点击：加入