Sharing examples of simulating sine and cosine curves in css animation-CSS Tutorial-php.cn

Sharing examples of simulating sine and cosine curves in css animation

黄舟

Release： 2017-10-08 09:33:56

Original

1951 people have browsed it

Let’s write a css3 parabola animation today = =

Parabola animation from left to right, let’s temporarily divide the action into uniform rightward movement and variable speed up and down movement.

For horizontal uniform motion, we can use translateX(x): define 2D transformation and move elements along the X axis; and linear: the speed of the animation is the same from beginning to end. These two attribute values To achieve;

up and down uniform speed motion can use translateY(y): define 2D transformation, move the element along the Y axis; and ease-in-out: the animation starts at a low speed and Finish.

1.html

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

Copy after login

Make the p of the demobox move to the right at a constant speed, and the p of the demobox inside will move up and down with variable speed.

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);
    }
}

Copy after login

ok, a sine and cosine curve comes out @^-^@

The above is the detailed content of Sharing examples of simulating sine and cosine curves in css animation. For more information, please follow other related articles on the PHP Chinese website!