Teilen Sie Beispiele für die Simulation von Sinus- und Kosinuskurven in CSS-Animationen

Lassen Sie uns heute eine CSS3-Parabelanimation schreiben = =

Parabelanimation von links nach rechts, teilen wir die Aktion vorübergehend in eine gleichmäßige Bewegung nach rechts und eine Auf- und Abbewegung mit variabler Geschwindigkeit auf .

Für eine horizontale, gleichmäßige Bewegung können wir translatorX(x) verwenden: Definieren Sie eine 2D-Transformation und verschieben Sie Elemente entlang der X-Achse und linear: Die Geschwindigkeit der Animation ist von Anfang bis Ende gleich Diese beiden Eigenschaften können durch die Verwendung von translatorY(

y

) erreicht werden. out: Die Animation beginnt mit niedriger Geschwindigkeit und endet.

1.html

Bewegen Sie das p der Demobox mit konstanter Geschwindigkeit nach rechts, und das p der Demobox im Inneren kann sich nach oben und unten bewegen mit variabler Geschwindigkeit.

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

2.css

ok, es kommt eine Sinus- und Kosinuskurve heraus @^-^@

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

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Simulation von Sinus- und Kosinuskurven in CSS-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!