css動畫之類比正餘弦曲線的執行個體分享

今天就寫一個css3拋物線的動畫吧= =

從左至右的拋物線動畫，我們就暫且把動作分為勻速向右運動和變速的上下運動。

水平勻速運動我們可以利用 translateX(x)：定義 2D 轉換，沿著 X 軸移動元素；以及linear：動畫從頭到尾的速度是相同的 這兩個屬性值來實現；

上下的勻變速運動可以利用translateY(y)：定義 2D 轉換，沿著 Y 軸移動元素；以及ease-in-out：動畫以低速開始和結束。

1.html

<div id="container">      <div class="demobox">           <div class="demo"></div>      </div>      <div class="demobox">            <div class="demo"></div>      </div></div>

把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，一個正餘弦曲線出來啦 @^-^@