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!