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

Home

Web Front-end

CSS Tutorial

Sharing examples of simulating sine and cosine curves in css animation

Oct 08, 2017 am 09:33 AM

css Example

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

&lt;div id=&quot;container&quot;&gt;
      &lt;div class=&quot;demobox&quot;&gt;
           &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;demobox&quot;&gt;
            &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
&lt;/div&gt;

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn