css3 动画 如何让元素走一条曲线（例如：4分之一圆）

html-css028

css3 动画 如何让元素走一条曲线（例如：4分之一圆）,第1张

可以x和y分开写动画，速度不一样，就形成曲率了

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}

css3中的动画有这个属性：animation-timing-function，他又几个不同的参数：

linear：动画从头到尾的速度是相同的。

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

你说的这个问题应该就是他的最后一个参数（cubic-bezier(n,n,n,n)---贝塞尔曲线），不过这个计算起来相对复杂很多。你可以参考一下http://blog.sina.com.cn/s/blog_68784e160101a7h5.html