贝塞尔曲线在线取值,打开网站就看到如下的界面;你可以自己调解运动曲线;我自己选了个向上做加速的曲线;然后复制cubic-bezier()值就是可以了。
贝塞尔曲线所有的代码;
html代码
css代码 html{ background:#ad4e24; } //定义球的初始值,位置是绝对定位; .ball{ height:100px; width:100px; border-radius:50%; position:absolute; bottom:40px; z-index:10; left:40px; background:greenyellow; } //定义动画的流程 .run_top_right{ display:block; animation:run-right-right3s0.4s1linear,run-right-top3s0.4s1cubic-bezier(.66,.1,1,.41); //animation:run-right-right3s0.4s1linear,run-right-top3s0.4s1ease-out; animation-fill-mode:forwards; } //向上走的动画初始及结尾值 @keyframesrun-right-top{ 0%{ bottom:40px; } 100%{ bottom:800px; } } //向上右的动画初始及结尾值 @keyframesrun-right-right{ 0%{ left:40px; transform:scale(0.7); } 100%{ left:600px; transform:scale(0.45); } } 贝塞尔曲线简单解释 第一、分解运动 上图的曲线运动进行分解 向右:匀速运动; 向上:加速运动;(因为向上的线越来越陡,意味着速度越来越快,所以在做加速运动) 第二、实现代码解释 有了对该运动的本质认识,那么实现起来就很易如反掌了。 总之,想要深入了解CSS3动画,实现随心所欲的动画效果,还是有必要理解下其中的原理。