Simulation of positive cosine curve of CSS animation by example sharing

Write an animation of the CSS3 parabola today = =

From left to right parabolic animation, we will temporarily divide the motion into a uniform right motion and variable speed up and down movement.

Horizontal uniform Motion We can use TranslateX (x): Define 2D transformations, move elements along the x-axis, and linear: the speed of the animation from beginning to end is the same as the two attribute values to achieve;

The upper and lower variable motion can take advantage of Translatey (y): Define 2D transformations, move elements along the y axis, and ease-in-out: Animations start and end at low speed.

1.html

<div id= "Container" >      <div class= "Demobox" >           <div class= "Demo" ></div>      </div >      <div class= "Demobox" >            <div class= "Demo" ></div>      </div></div>

The Demobox p to the right of the uniform movement, the inside of the demo p do up and down the speed of movement.

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, a sine-cosine curve comes out @ ^-^ @