今天就写一个css3抛物线的动画吧= =

从左到右的抛物线动画，我们就暂且把动作分为匀速向右运动和变速的上下运动。

水平匀速运动我们可以利用 translateX(x)：定义 2D 转换，沿着 X 轴移动元素；以及linear：动画从头到尾的速度是相同的 这两个属性值来实现；

上下的匀变速运动可以利用translateY(y)：定义 2D 转换，沿着 Y 轴移动元素；以及ease-in-out：动画以低速开始和结束。

1.html

把demobox的p做向右的匀速的运动，里面demo的p做上下的变速的运动。

2.css#container {

height:110px;

font-size:0;

width:140px;

}

.demobox {

float:right;

width:5px;

height:5px;

animation:myfirst1 linear 5s infinite;

-webkit-animation:myfirst1 linear 5s infinite;

}

.demo {

width:6px;

height:6px;

border-radius:3px;

background:#90e4e9;

animation:myfirst2 ease-in-out 1s infinite alternate;

-webkit-animation:myfirst2 ease-in-out 1s infinite alternate; /*Safari and Chrome */

}

.demobox:nth-of-type(1) .demo:nth-of-type(1){

animation-delay:0s;

}

.demobox:nth-of-type(2) .demo:nth-of-type(1){

animation-delay:0.03s;

}

@keyframes myfirst1

{

from {

transform:translateX(0px);

-webkit-transform:translateX(0px);

}

to {

transform:translateX(1000px);

-webkit-transform:translateX(1000px);

}

}

@-webkit-keyframes myfirst1 /* Safari and Chrome */

{

from {

transform:translateX(0px);

-webkit-transform:translateX(0px);

}

to {

transform:translateX(1000px);

-webkit-transform:translateX(1000px);

}

}

@keyframes myfirst2

{

0% {

transform:translateY(0px);

-webkit-transform:translateY(0px);

}

50% {

transform:translateY(100px);

-webkit-transform:translateY(100px);

}

100% {

transform:translateY(0px);

-webkit-transform:translateY(0px);

}

}

@-webkit-keyframes myfirst2 /* Safari and Chrome */

{

0% {

transform:translateY(0px);

-webkit-transform:translateY(0px);

}

50% {

transform:translateY(100px);

-webkit-transform:translateY(100px);

}

100% {

transform:translateY(0px);

-webkit-transform:translateY(0px);

}

}

ok，一个正余弦曲线出来啦 @^-^@