模板代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
bottom: 40px;
z-index: 10;
left: 40px;
background: #2bd8ff;
}
.run_top_right {
display: block;
animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes run-right-top {
0% {
bottom: 40px;
opacity: 1;
}
50% {
opacity: 1;
}
100% {
bottom: 400px;
opacity: 0;
}
}
@keyframes run-right-right {
0% {
left: 40px;
}
100% {
left: 300px;
}
}
</style>
</head>
<body>
<div class="ball run_top_right"></div>
</body>
</html>
其中,run-right-right控制向右运动,run-right-top控制向上运动。(当然,模板默认做直线运动)
贝塞尔曲线传送门
打开传送们,我们修改run-right-top的缓动函数,对比着看,如下图:
即改这句:
animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;
linear
ease
ease-out
由于篇幅限制,就不一一上传了。
可以看到,在水平运动为匀速运动时,改变垂直运动的缓动函数可以带来直观的与之对应的路径效果。同样的,我们可以定制我们的贝塞尔曲线,让小球沿着路线运动。比如,来个炫的:(最后上传的一次了)
cubic-bezier(.37,-0.99,.16,1.04)
另外,如果垂直缓动函数为linear,改水平的缓动函数,会发生什么事呢?(最最最后的一次上传)
让我们以ease-out为例子:(以下图1为ease-out的曲线)
可以观察得知,改水平的缓动函数会使小球做镜像曲线运动(图1斜线即对称轴)。其实这个观点不是很准确,因为看一下接下来改动水平缓动函数为之前我们的定制函数cubic-bezier(.37,-0.99,.16,1.04):
这样又得不出结论了,有一定规律,但说不出来,对于像ease这样的函数应该简单理解水平会做镜像曲线运动是没什么问题的,对于复杂的还是要多实践。